z-index解析
不设置z-index
如果没有元素设置z-index,元素对方会按照文档中出现的顺序从底到高排列:(排列顺序)
1.根元素
2.正常的流的元素
3.设置了position的元素,按在文档中的顺序排列
注:标准的块元素(DIV #5)没有设置任何定位,他将在定位元素之前渲染,出现在定位元素的下面,即使在html文档中处于后面。
示例见下图(注意元素的前后关系):
![](http://images0.cnblogs.com/blog/323039/201305/02150720-afd8f9d69f454e788c6e52b3acf37085.png)
示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px Arial; } span.bold { font-weight: bold; } #normdiv { height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; text-align: center; } #reldiv1 { opacity: 0.7; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; text-align: center; } #reldiv2 { opacity: 0.7; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; text-align: center; } #absdiv1 { opacity: 0.7; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #absdiv2 { opacity: 0.7; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } </style></head> <body> <br /><br /> <div id="absdiv1"> <br /><span class="bold">DIV #1</span> <br />position: absolute; </div> <div id="reldiv1"> <br /><span class="bold">DIV #2</span> <br />position: relative; </div> <div id="reldiv2"> <br /><span class="bold">DIV #3</span> <br />position: relative; </div> <div id="absdiv2"> <br /><span class="bold">DIV #4</span> <br />position: absolute; </div> <div id="normdiv"> <br /><span class="bold">DIV #5</span> <br />no positioning </div> </body></html>
设置z-index属性
上面的例子解释了没有设置z-index是页面堆积的默认方式。如果想改变这种方式就为position元素设置z-index属性。这个属性值是整型(正数,负数),代表元素的z坐标。
1.z-index属性只对设置了position属性的元素起作用。
2.没有设置z-index的元素默认显示在0层。
3.设置了相同z-index的元素排列方式按照没有设置的情况堆放(见上)。测试结果如下
![](http://images0.cnblogs.com/blog/323039/201305/02150837-1bf9c564d2334fb7862e409cfb05d378.png)
堆叠环境(
Stacking context)在上文中的讲解中可以看出div的渲染顺序是由他们的z-index影响的结果,这个特殊的属性使他们形成了堆叠环境。
在文档中的任何位置通过以下情况就可创建一个堆叠环境:
1.设置了position(absolutely或relatively)
2.元素设置了opacity(值小于1)
3.手机webkit和chrome 22+,position设置为fixed和z-index设置为auto也会形成堆叠环境
一个堆叠环境可以包含在另一个堆叠环境中,每个堆叠环境和他同级的堆叠环境相对独立互不影响,只影响它的子元素。
示例:
![](http://images0.cnblogs.com/blog/323039/201305/02150922-58e908b95f7940438b186a3158fb0339.png)
文档结构如下:
html
- DIV #1
- DIV #2
- DIV #3
- DIV #4
- DIV #5
- DIV #6
需要注意的是div#4 div#5 div#6是div#3的子元素,因此这三个元素的堆叠基于div#3。即使z-index设置为6也不会高于div#1,设置为1也不会低于div#2。实际的渲染顺序如下:
Root
- DIV #2 - z-index is 2
- DIV #3 - z-index is 4
- DIV #5 - z-index 是 1, 渲染顺序4.1
- DIV #6 - z-index is 3, 渲染顺序 4.3
- DIV #4 - z-index is 6, 渲染顺序 4.6
- DIV #1 - z-index is 5
代码如下:
<!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>Understanding CSS z-index: The Stacking Context: Example Source</title> <style type="text/css"> * { margin: 0; } html { padding: 20px; font: 12px/20px Arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px dashed #009; padding-top: 125px; background-color: #ddf; text-align: center; } </style> </head> <body> <div id="div1"> <h1>Division Element #1</h1> <code>position: relative;<br/> z-index: 5;</code> </div> <div id="div2"> <h1>Division Element #2</h1> <code>position: relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>Division Element #4</h1> <code>position: relative;<br/> z-index: 6;</code> </div> <h1>Division Element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>Division Element #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>Division Element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> </body> </html>
原文:
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index