z-index无效注意事项
生活随笔
收集整理的這篇文章主要介紹了
z-index无效注意事项
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.z-index只能作用在position為absolute,relative,fixed的非static元素上
2.z-index只能在同等級元素上作用，無法在父元素和子元素上起作用（父元素和別的父元素的子元素這樣是無效的）。
3.看2的下面例子：自己去運(yùn)行一下就可以理解了。反正記住用z-index要在同一個(gè)級別的元素用。把下面的紅色部分分別刪和不刪比較下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> html,body{ margin:0; padding:0; border:none; } </style> </head> <body><div style='width:100%;height:1000px;'><div id='父1' style='width:200px;height:100px;position:relative;background:green;top:0px;z-index:3;'><div id='子1' style='width:100px;height:100px;position:absolute;top:100px;left:30px;background:white;border:1px solid blue;'>子1</div></div><div id='父2' style='width:200px;height:100px;position:absolute;background:red;left:30px;top:50px;z-index:2;'>紅色</div><div style='width:200px;height:100px;position:absolute;background:yellow;left:60px;top:120px;z-index:1;'>黃色</div></div> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/horsen/p/6908016.html
總結(jié)
以上是生活随笔為你收集整理的z-index无效注意事项的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [NOIP2015] 提高组 洛谷P26
- 下一篇： jsp表达式