CSS中z-index属性的简单理解
生活随笔
收集整理的這篇文章主要介紹了
CSS中z-index属性的简单理解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）
總之就是一句話：擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">#father{position: relative;}#box1{color: red;font-weight: 900;}.spouse{position: absolute;width: 300px;height: 300px;left: 0px;top: 0px;background-color: antiquewhite;z-index: -1;}.kunling{width: 200px;height: 200px;position: absolute;left: 200px;top: 200px;z-index: 0;}</style></head><body><div id="father"><div id="box1"><img src="img\spouse.jpg" class="spouse">我本該在上面</div></div><div id="box2"><img src="img\kunling.jpg" class="kunling" ></div></body> </html>運行結果：
由上圖可知，按照順序大的那張圖片應該顯示在小的那張圖片的上方，但是它由于z-index為負數，小于小的那張圖片的z-index，因此就顯示在了index的下方。
注：創作不易，轉載請注明出處
https://blog.csdn.net/hanhanwanghaha一個超級無敵可愛的人歡迎你的關注！
有問題可在CSDN上私信我，期待與你的一起學習
總結
以上是生活随笔為你收集整理的CSS中z-index属性的简单理解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql -- 死锁
- 下一篇： 实操代码带你理解CSS中的常用选择器（你