Содержание

1 A negative value places element below the normal flow, and a positive value places them above the flow.
2 Larger values move them closer to the user in the stacking order.
3 Set z-index to 100
4 Stacking with z-index
5 This is a test headline
- 5.1 The default value for z-index is auto.
- 5.2 three layers of div tags
6 Layer One
7 Layer Two
8 Layer Three

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">

.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>

BEFORE

ABSOLUTE BEFORE

this is a test. this is a test.

</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">

 <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>

1

2

3

4

</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">

.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>

Background and Borders of Stacking Context #1 z-index:2

Absolute z-index:-999

Static Block

Static Float

Static Span

Relative Span z-index:0 Absolute z-index:999

this is a test. this is a test.

</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">

 <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>

1

2

3

4

</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>

div1

div2

div3

div4

   </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">

 <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">

   <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>

HTML/CSS/Box Model/z index

Содержание

A negative value places element below the normal flow, and a positive value places them above the flow.

Larger values move them closer to the user in the stacking order.

Set z-index to 100

Stacking with z-index

This is a test headline

The default value for z-index is auto.

three layers of div tags

Layer One

Layer Two

Layer Three

Use z-index to change the overlap index

z-index and child selector

z-index and sibling selector

z-index: auto

z index, child index

z-index controls the stacking order of positioned elements.

Z-index Positioning

z-index value

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты