HTML/CSS/Box Model/z index — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 11:16, 26 мая 2010
Содержание
A negative value places element below the normal flow, and a positive value places them above the flow.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Z-Axis Positioning</title> <style type="text/css">
- bottom {
position: absolute; left: 100px; top: 25px; z-index: 1; border: 1px solid black; }
- middle {
position: absolute; left: 90px; top: 25px; z-index: 2; border: 1px dotted red; }
- top {
position: absolute; left: 80px; top: 25px; z-index: 3; border: 1px dashed green; } </style> </head> <body>
</body> </html>
</source>
Larger values move them closer to the user in the stacking order.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .container {
position: relative;
}
- .box {
position: absolute; overflow: auto; visibility: visible; z-index: 1; left: 0; right: auto; top: 0; bottom: auto; width: 220px; height: 100px; margin: 10px; padding: 10px; background: red;
}
- .before {
z-index: 2; width: 100px; height: 400px; left: 400px; right: auto; top: 100px; bottom: auto; background: yellow;
} </style> </head> <body>
</body> </html>
</source>
Set z-index to 100
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">
body {
margin: 0px; padding: 0px; color: #000; background-color: #ccc;
}
- one {
position: absolute; top: 10px; left: 10px; z-index: 4; padding: 10px; background-color: #fff; border: 1px solid #000; width: 20%;
}
- two {
position: absolute; top: 40px; left: 40px; z-index: 300; padding: 10px; background-color: #ccc; border: 1px solid #000; width: 20%;
}
- three {
position: absolute; top: 70px; left: 70px; z-index: 2; padding: 10px; background-color: #fff; border: 1px solid #000; width: 20%;
}
- four {
position: absolute; top: 100px; left: 100px; z-index: 1; padding: 10px; background-color: #ccc; border: 1px solid #000; width: 20%;
}
</style>
</head> <body>
</body> </html>
</source>
Stacking with z-index
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Stacking with z-index</title> </head> <body>
<img src="http://www.wbex.ru/style/logo.png" />
<img src="http://www.wbex.ru/style/logo.png" />
This is a test headline
</body> </html>
</source>
The default value for z-index is auto.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- .stacking-context1 {
position: absolute; left: 10px; top: 70px; background: red;
}
- .stacking-context2 {
position: absolute; left: 223px; top: 120px; background: gold;
}
- .level2 {
position: absolute; background: blue;
}
- .level3 {
position: static; background: yellow;
}
- .level4 {
float: left; background: black;
}
- .level5 {
position: static; background: pink;
}
- .level6 {
position: relative; background: gray;
}
- .level7 {
position: absolute; background: gold;
} </style> </head> <body>
Absolute z-index:-999
Static Float
Static SpanRelative Span z-index:0
Absolute z-index:999
</body> </html>
</source>
three layers of div tags
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>
<title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css">
div#layer1 {
z-index: 1; position: absolute; top: 10px; left: 10px; width: 200px; height: 100px; background-color: #fff; border: 1px solid #000; padding: 5px;
} div#layer2 {
z-index: 2; position: absolute; top: 20px; left: 20px; width: 200px; height: 100px; background-color: #fff; border: 1px solid #000; padding: 5px;
} div#layer3 {
z-index: 3; position: absolute; top: 30px; left: 30px; width: 200px; height: 100px; background-color: #ffffff; border: 1px solid #000000; padding: 5px;
} </style> </head> <body>
Layer One
Layer Two
Layer Three
</body> </html>
</source>
Use z-index to change the overlap index
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">
body {
margin: 0px; padding: 0px; color: #000; background-color: #ccc;
}
- one {
position: absolute; top: 10px; left: 10px; z-index: 4; padding: 10px; background-color: #fff; border: 1px solid #000; width: 20%;
}
- two {
position: absolute; top: 40px; left: 40px; z-index: 3; padding: 10px; background-color: #ccc; border: 1px solid #000; width: 20%;
}
- three {
position: absolute; top: 70px; left: 70px; z-index: 2; padding: 10px; background-color: #fff; border: 1px solid #000; width: 20%;
}
- four {
position: absolute; top: 100px; left: 100px; z-index: 1; padding: 10px; background-color: #ccc; border: 1px solid #000; width: 20%;
}
</style>
</head> <body>
</body> </html>
</source>
z-index and child selector
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; padding: 10px; border: 1px solid black; background: red; width: 100px; height: 100px; top: 20px; left: 20px; z-index: 4; } div > div { background: lightblue; z-index: 3; } div > div > div { background: lightgreen; z-index: 2; } div > div > div > div { background: pink; z-index: 1; } </style> </head> <body>
</body>
</html>
</source>
z-index and sibling selector
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; padding: 10px; border: 1px solid black; background: red; width: 100px; height: 100px; top: 20px; left: 20px; z-index: 4; } div + div { background: lightblue; top: 40px; left: 40px; z-index: 3; } div + div + div { background: lightgreen; top: 60px; left: 60px; z-index: 2; } div + div + div + div { background: pink; top: 80px; left: 80px; z-index: 1; } </style> </head> <body>
</body>
</html>
</source>
z-index: auto
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; padding: 10px; border: 1px solid black; background: red; width: 100px; height: 100px; top: 20px; left: 20px; } div + div { background: lightblue; top: 40px; left: 40px; } div + div + div { background: lightgreen; top: 60px; left: 60px; } div + div + div + div { background: pink; top: 80px; left: 80px; } </style> </head> <body>
</body>
</html>
</source>
z index, child index
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> div { position: absolute; padding: 10px; border: 1px solid black; opacity: 0.9; background: lightyellow; width: 100px; height: 100px; top: 20px; left: 20px; z-index: 4; } div > div { background: lightblue; z-index: 3; } div > div > div { background: lightgreen; z-index: 2; } div > div > div > div { background: pink; z-index: 1; } </style> </head> <body>
</body>
</html>
</source>
z-index controls the stacking order of positioned elements.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>Using z-index</title> <style type="text/css" rel="stylesheet">
p {border-width: thin;border-style: solid; height: 100px; width: 100px;text-align: center}
</style> </head> <body>
Container 1
Container 2
Container 3
</body>
</html>
</source>
Z-index Positioning
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>Z-index Positioning</title> <style rel="stylesheet" type="text/css">
body {
color: #000000; background-color: #ffffff; font-family: arial, verdana, sans-serif; font-size: 12px;
} p {
width: 200px; background-color: #fff; padding: 5px; margin: 10px; border-style: solid; border-color: #000000; border-width: 2px;
} p.one {
z-index: 3; position: absolute; left: 0px; top: 0px;
} p.two {
z-index: 1; position: absolute; left: 150px; top: 25px;
} p.three {
z-index: 2; position: absolute; left: 40px; top: 35px;
} </style> </head> <body>
one.
two.
three
</body> </html>
</source>
z-index value
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>z-index</title> <style rel="stylesheet" type="text/css">
div {
position: absolute; width: 100px; height: 100px; border: 1px solid rgb(200, 200, 200);
} div#one {
background: pink; top: 10px; left: 10px; z-index: 4;
} div#two {
background: lightblue; top: 20px; left: 20px; z-index: 3;
} div#three {
background: yellowgreen; top: 30px; left: 30px; z-index: 2;
} div#four {
background: orange; top: 40px; left: 40px; z-index: 1;
}
</style> </head> <body>
</body>
</html>
</source>