當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS堆叠

發(fā)布時間：2024/4/15 CSS 57 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS堆叠小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

舉個例子：

#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 <div id="b">2</div> </div><div id="c">3</div> </body>

id為a，c的默認處于同一層疊層級，但由于c在a的后面，所以，3在1的上面。b的z-index:1;則2靠前。注意：position屬性必須為relative、absolute或fixed才有效。如果不設(shè)置b的z-index，則2在1的前面，在3的后面。

如果設(shè)置了元素父級元素的層疊屬性，則受影響。如果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"> <div id="b">20</div> <div id="c">10</div> </div><div id="d"> <div id="e">2</div> <div id="f">1</div>  </div></body>

在同一個層疊上下文中，id為a與b的元素，它們的z-index:auto;所以它們處于同一個層。但由于b在a的后面，則b相對于a考前。id為c、d、e、f的元素處于同一層疊上下文，則的層疊順序按照從大到小的順序依次從前到后。一旦元素的父級元素設(shè)定了z-index的屬性，則它們受父級元素層疊層次的影響。

轉(zhuǎn)載于:https://www.cnblogs.com/webliu/p/4422891.html

總結(jié)

以上是生活随笔為你收集整理的CSS堆叠的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。