HTML/CSS/Box Model/z index — различия между версиями

Версия 09:21, 26 мая 2010

Содержание

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 The default value for z-index is auto.
6 three layers of div tags
7 Use z-index to change the overlap index
8 z-index and child selector
9 z-index and sibling selector
10 z-index: auto
11 z index, child index
12 z-index controls the stacking order of positioned elements.
13 Z-index Positioning
14 z-index value

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

 
<!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>
<div id="top"><img src="white.gif" width="300" height="300" alt=""
border="0"></div>
<div id="middle"><img src="white.gif" width="300" height="300" alt=""
border="0"></div>
<div id="bottom"><img src="white.gif" width="300" height="300" alt=""
border="0"></div>
</body>
</html>

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

 

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

<div class="container"> 
    <div>BEFORE</div> 
    <div class="before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 
</div> 
</body>
</html>

Set z-index to 100

 

<?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>
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div>
  <div id="four">4</div>
</body>
</html>

Stacking with z-index

 
<!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>
<div style="position: relative;">
  <div style="position: absolute; z-index: 2;">
    <img src="http://www.wbex.ru/style/logo.png" />
  </div>
  <div style="position: absolute; top: 40px; margin-left: 70px; z-index: 1;">
    <img src="http://www.wbex.ru/style/logo.png" />
  </div>
  <div style="position: absolute; margin-left: 15px; z-index: 3;">
    <h1>This is a test headline</h1>
  </div>
</div>
</body>
</html>

The default value for z-index is auto.

 
<!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>
<div class="stacking-context1 box"> 
<div class="caption"> Background and Borders of Stacking Context #1 <code>z-index:2</code></div> 
<span class="level2 box">Absolute <code>z-index:-999</code></span> 
<div class="level3 box">Static Block<br /> 
<span class="level4 box">Static Float</span> 
<span class="level5 box">Static Span</span><br /><p class="clear"></p> 
<span class="level6 box">Relative Span <code>z-index:0</code></span> 
<span class="level7 box">Absolute <code>z-index:999</code></span> 
</div> 
</div> 
<div class="stacking-context2 box">this is a test. this is a test. </div> 
</body>
</html>

three layers of div tags

 
<!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>
  <div id="layer1"><h1>Layer One</h1></div>
  <div id="layer2"><h1>Layer Two</h1></div>
  <div id="layer3"><h1>Layer Three</h1></div>
</body>
</html>

Use z-index to change the overlap index

 

<?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>
  <div id="one">1</div>
  <div id="two">2</div>
  <div id="three">3</div>
  <div id="four">4</div>
</body>
</html>

z-index and child selector

 
<!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>
        <div>
            <div>
                <div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

z-index and sibling selector

 
<!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>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

z-index: auto

 
<!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>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

z index, child index

 
<!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>
        <div>div1
            <div>div2
                <div>div3
                    <div>div4
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

z-index controls the stacking order of positioned elements.

 

<!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>
    <p style="background-color: red; position: relative; left: 0;z-index: 10">
      Container 1
    </p>
    <p style="background-color: white; position: relative; top: -100px;
      left: 50px;z-index: 5">
      Container 2
    </p>
    <p style="background-color: blue; position: relative; top: -200px;
      left: 100px;z-index: 0">
      Container 3
    </p>
  </body>
</html>

Z-index Positioning

 
<?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>
<div class="page">
<p class="one"><b>one</b>.</p>
<p class="two"><b>two</b>.</p>
<p class="three"><b>three</b></p>
</div>
</body>
</html>

z-index value

 

<!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>
        <div id="one"></div>
        <div id="two"></div>
        <div id="three"></div>
        <div id="four"></div>
    </body>
</html>

HTML/CSS/Box Model/z index — различия между версиями

Версия 09:21, 26 мая 2010

Содержание

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

The default value for z-index is auto.

three layers of div tags

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

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 08:16, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 09:21, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)