CSS定位与层级的理解(CSS中元素的相对定位和绝对定位的区别是什么?)
有一次写项目，发现了一个我个人未理解的一个问题，就是z-index在定位中失效了，后来才发现假如给予层级、定位的盒子与另一个给予层级、定位的盒子为父子关系，那么z-index是不生效的。
尤其是在早期使用JS写页面下拉菜单效果的时候，时常(个人)会把下拉菜单内容写在导航栏里面，再用定位，这就造成了一个问题，下拉菜单会从导航栏z轴最上面滑出，这时我们使用z-index是不生效的，因为下拉菜单和导航栏是夫父子关系。下面我用代码来解释一下：
<div class="box1">1
<div class="box2">2</div>
</div>
<div class="box3">3</div>
这里我们准备了三个盒子，其中box1与box2为父子关系，box2为box1的子,box3为box2的兄弟。我们给这三个盒子都设置定位和z-index：
.box1 {
width: 200px;
height: 200px;
background-color: tomato;
position: relative;
z-index: 2;
}
.box2 {
width: 200px;
height: 200px;
background-color: greenyellow;
position: absolute;
z-index: 1;
}
.box3 {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
top:80px;
z-index: 1;
}
这里我们把box1的z-index调为2，其它盒子的层级调为1。结果为box2浮在所有盒子上方，box3浮于box1下方，由此我们可以得出，z-index对于父子关系的盒子是不生效的，子级永远会浮于父元素的上方，所以我们制作下拉菜单时尽量使用兄弟关系的盒子哦~复制代码以上是个人遇到的问题，希望能帮助到遇到同样问题的大家~~(萌新瑟瑟发抖)
作者：小小花的小
链接：https://juejin.cn/post/7029603223744806919