阅读 47 SEO

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


文章分类
代码人生
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐