CSS3 Z—Index 详解
【摘要】 z-index属性规定元素的堆叠顺序，值越高就会显示在上面。无定位 <style> .div0{ height: 80px; width:100px; } div{ height: 50px; width:60px; } ...
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值的设置无法影响父子级的显示，如果只有子级脱离了标准流，父级没有脱标，那么就能修改父子级的显示，
包含个人理解 错误请指出
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）