CSS堆叠
举个例子：
#a{ position:relative; width:200px; height:80px; background:red; } #b{ position:absolute; width:150px; height:50px; background:green; left:20px; top:20px; z-index:1; } #c{ position:absolute; width:50px; height:100px; background:yellow; left:80px; top:0; } </style> <body> <div id="a">1 <!--默认z-index:auto;--> <div id="b">2</div> <!--z-index:1;--> </div> <div id="c">3</div> <!--默认z-index:auto;--> </body>
id为a，c的默认处于同一层叠层级，但由于c在a的后面，所以，3在1的上面。b的z-index:1;则2靠前。注意：position属性必须为relative、absolute或fixed才有效。如果不设置b的z-index，则2在1的前面，在3的后面。
如果设置了元素父级元素的层叠属性，则受影响。如果a元素的z-index为0；c元素的z-index的值为大于或等于a元素的z-index的值，则无论b元素的z-index值为多少b都处于c元素的下面。
#a{ position:relative; width:200px; height:80px; background:red; z-index:0; } #b{ position:absolute; width:150px; height:50px; background:green; left:20px; top:20px; z-index:2; } #c{ position:absolute; width:50px; height:100px; background:yellow; left:80px; top:0; z-index:0; }
再举个例子：<style>
#a,#d{ width:200px; height:200px; padding:10px; position:absolute; background:lightgrey; } #d{ left:80px; top:80px; background:black; } #b,#e{ width:100px; height:100px; text-align:right; position:absolute; z-index:20; background:red; } #e{ left:10px; top:10px; z-index:2; } #c,#f{ position:absolute; width:100px; height:100px; left:50px; top:50px; background:yellow; text-align:right; z-index:10; } #f{ z-index:1; } </style> <body> <div id="a"> <!--不设置z-index属性，默认为z-index:auto;--> <div id="b">20</div> <!--z-index=20--> <div id="c">10</div> <!--z-index=10--> </div> <div id="d"> <!--不设置z-index属性,默认为z-index:auto;--> <div id="e">2</div> <!--z-index=2--> <div id="f">1</div> <!--z-index=1--> </div> </body>
在同一个层叠上下文中，id为a与b的元素，它们的z-index:auto;所以它们处于同一个层。但由于b在a的后面，则b相对于a考前。id为c、d、e、f的元素处于同一层叠上下文，则的层叠顺序按照从大到小的顺序依次从前到后。一旦元素的父级元素设定了z-index的属性，则它们受父级元素层叠层次的影响。
