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的屬性，則它們受父級元素層疊層次的影響。
轉載于:https://www.cnblogs.com/webliu/p/4422891.html
總結
- 上一篇： 【转】BLE 学习记录
- 下一篇： 转载：CSS垂直居中总结