z-index属性规定元素的堆叠顺序，值越高就会显示在上面。
无定位
<style> .div0{ height: 80px; width:100px; } div{ height: 50px; width:60px; } </style> </head> <body> <div class="div0" style="background-color:green"> <div class="div1" style="background-color:red">123</div> </div> <div class="div2" style="background-color:blue">456</div> <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> </body>
编辑
div0 2 3都在按照块显示，可以看到div1在div0上面，子级会显示在父级上方。
有定位
<style> .div0{ height: 80px; width:100px; } div{ height: 50px; width:60px; } .div2{ position:absolute; } .div3{ position:absolute; } </style> </head> <body> <div class="div0" style="background-color:green"> <div class="div1" style="background-color:red">123</div> </div> <div class="div2" style="background-color:blue">456</div> <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> </body>
编辑
div2和div3设置的绝对定位，脱离标准流，排在后面写的div3在上面显示的，同级后者居上，
设置z-index
<style> .div0{ height: 80px; width:100px; } div{ height: 50px; width:60px; } .div2{ z-index: 100; position:absolute; } .div3{ position:absolute; z-index: 10; } </style> </head> <body> <div class="div0" style="background-color:green"> <div class="div1" style="background-color:red">123</div> </div> <div class="div2" style="background-color:blue">456</div> <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> </body>
编辑
div2比div3的z-index高，所以蓝色div2显示在上面。
混合显示
<style> .div0{ height: 80px; width:100px; } div{ height: 50px; width:60px; } .div2{ z-index: 100; position:absolute; } .div3{ position:absolute; z-index: 10; } </style> </head> <body> <div class="div2" style="background-color:blue">456</div> <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> <div class="div0" style="background-color:green"> <div class="div1" style="background-color:red">123</div> </div> </body>
编辑
由于div2 3 脱离标准流所以在上面 因为div2的z-index值高所以显示在最上面，依次分别是 div2 div3 div1 div0
再看下面这个
<style> .div0{ height: 80px; width:100px; } div{ height: 50px; width:60px; } .div2{ z-index: -1; position:absolute; } .div3{ position:absolute; z-index: -1; } </style> </head> <body> <div class="div2" style="background-color:blue">456</div> <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> <div class="div0" style="background-color:green"> <div class="div1" style="background-color:red">123</div> </div> </body>
编辑
可以看到红色显示出来了，这是为什么，静态定位不能修改div0 z-index的值，但不意味着div0没有值，它的值是0，当你修改其他元素的z-index值是负数小于 0是 div0自然就显示在了最外层，
现在的顺序是 div1 div0 div3 div2
能不能让里面的元素不显示在外层？
.div0{ position:absolute; height: 200px; width:170px; z-index:100; } .div1{ position:absolute; height: 80px; width:100px; z-index:-1; } /* div{ height: 50px; width:60px; } */ /* .div2{ z-index: -1; position:absolute; } .div3{ position:absolute; z-index: -1; } */ </style> </head> <body> <!-- <div class="div2" style="background-color:blue">456</div> <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> --> <div class="div0" style="background-color:green"> <div class="div1" style="background-color:red">123</div> </div> </body>
编辑
div0和div1都有定位 div0z-index值大于div1，但是红色仍然是外层。
如果div0没有修改定位呢？
<style> .div0{ height: 200px; width:170px; } .div1{ position:absolute; height: 80px; width:100px; z-index:-1; } /* div{ height: 50px; width:60px; } */ /* .div2{ z-index: -1; position:absolute; } .div3{ position:absolute; z-index: -1; } */ </style> </head> <body> <!-- <div class="div2" style="background-color:blue">456</div> <div class="div3" style="background-color:rgba(0, 0, 0, 0.801)">789</div> --> <div class="div0" style="background-color:green"> <div class="div1" style="background-color:red">123</div> </div> </body>
编辑
div0显示在了外面，要注意设置定位的场景，父子级设置设置脱离标准流的定位，z-index值的设置无法影响父子级的显示，如果只有子级脱离了标准流，父级没有脱标，那么就能修改父子级的显示，
包含个人理解 错误请指出
