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对于父子关系的盒子是不生效的，子级永远会浮于父元素的上方，所以我们制作下拉菜单时尽量使用兄弟关系的盒子哦~

 以上是个人遇到的问题，希望能帮助到遇到同样问题的大家~~(萌新瑟瑟发抖)

标签：定位,层级,盒子,index,box2,box1,下拉菜单,CSS,200px
来源： https://blog.csdn.net/qq_44644791/article/details/121217421