當(dāng)前位置：
首頁 >
一天搞定CSS：层级(z-index)--18
發(fā)布時間：2025/3/20
46
豆豆
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS：层级(z-index)--18
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
因為定位的出現(xiàn)，所以有了元素重疊的情況，此時就出現(xiàn)了顯示誰的情況。在多層布局時，容易出現(xiàn)這種情況
定位position見：http://blog.csdn.net/baidu_37107022/article/details/71642147
1.默認層級規(guī)則
但層級規(guī)則可以通過z-index來設(shè)置
1.在正常情況下，層級的大小由順序決定，后面的元素要比前面的元素的層級要高
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;background: red;color: #fff;}.div2{width: 150px;background: green;margin-top: -50px;}span{background: blue;color: #fff;width: 100px;height: 100px;display: block;margin-top: -50px;}</style></head><body><!--在正常情況下，層級的大小由順序決定，后面的元素要比前面的元素的層級要高--><div>kaivon1</div><div class="div2">kaivon2</div><span>span</span></body> </html>效果圖
2.有定位元素的層級要比沒有定位元素層級要高
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;background: red;color: #fff;}.div1{position: relative;}.div2{width: 150px;background: green;margin-top: -50px;}/*span{background: blue;color: #fff;width: 100px;height: 100px;display: block;margin-top: -50px;}*/</style></head><body><!--在正常情況下，層級的大小由順序決定，后面的元素要比前面的元素的層級要高有定位元素的層級要比沒有定位元素層級要高--><div class="div1">kaivon1</div><div class="div2">kaivon2</div><!--<span>span</span>--></body> </html>效果圖
2.層級(z-index)
層級由屬性z-index來控制：
它的值是一個數(shù)字，數(shù)字越大層級越高（在同一個層里）
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>div{width: 200px;height: 200px;background: red;color: #fff;position: relative;}.div1{z-index: 2;}.div2{width: 150px;background: green;margin-top: -50px;z-index: 1;}</style></head><body><!--在正常情況下，層級的大小由順序決定，后面的元素要比前面的元素的層級要高有定位元素的層級要比沒有定位元素層級要高在都有定位的情況下，層級還是取決于書寫順序z-index 層級它的值是一個數(shù)字，數(shù)字越大層級越高（在同一個層里）--><div class="div1">kaivon1</div><div class="div2">kaivon2</div></body> </html>總結(jié)
以上是生活随笔為你收集整理的一天搞定CSS：层级(z-index)--18的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一天搞定CSS：定位position--
- 下一篇： 【小练习03】CSS-表格（table）