需求是通过 z-index 改变层级,使父元素高于子元素。 首先,z-index 作用于已经定位的元素(position 属性值是非 static 的元素) 其次,如果想要父级覆盖子级,那么父级不需要设置 z-index,子级设置 z-index 为负就可以了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <div class="parent">parent <div class="child">child</div> </div> </body> <style type="text/css"> .parent { background-color: yellow; position: relative; } .child { background-color: green; position: relative; z-index: -2; } </style> </html>
|