如何提高当前盒子的层级

最新推荐文章于 2024-05-16 18:22:05 发布

JJ_Smilewang

最新推荐文章于 2024-05-16 18:22:05 发布

阅读量3.3k

点赞数 2

分类专栏： html5和CSS3基础文章标签： html5 前端 css3

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124093783

版权

html5和CSS3基础专栏收录该内容

16 篇文章 2 订阅

订阅专栏

我们在使用定位布局时，可能会出现盒子重叠的情况。

一般的层级顺序是根据在html结构中的书写顺序排列的，写在上面的盒子会被压在下面，可我们有时需要把写在后面的盒子放在最上面，虽然我们可以通过更改html里面的书写顺序来调整，但是这未免过于麻烦，所以我们的z-index属性就闪亮登场了，它是用来控制盒子的前后次序 (z轴) 。

<style>
    div {
        width: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
    }
    .box1 {
        position: absolute;
        top: 0;
        left: 10px;
        background-color: red;
    }
    .box2 {
        position: absolute;
        top: 50px;
        left: 60px;
        background-color: blue;
    }
    .box3 {
        position: absolute;
        top: 90px;
        left: 110px;
        background-color: purple;
    }
</style>
<body>
    <div class="box1">第一个盒子</div>
    <div class="box2">第二个盒子</div>
    <div class="box3">第三个盒子</div>
</body>
上述代码设置了三个绝对定位的盒子，得到的结果如下图：

通过图片可以可以看出，三个盒子的叠放顺序完全是按照html结构里书写的顺序来的，第一个盒子在最下方，第二个盒子在中间，第三个盒子在最上面。

那么此时如果我想改变三个盒子的叠放顺序的话，有两种方法：

第一种：更改html里的书写顺序，麻烦，不推荐；

第二种：使用z-index属性提高对应盒子的层级。比如此处我想把第二个盒子放在最上面，第一个盒子放在中间，第三个盒子放在最下面，那么我们只需在上面的代码中给第一个盒子增加一行代码z-index：1；给第二个盒子增加一行代码z-index：2; 即可得到下图的效果（为了方便观察，给盒子增加了透明属性opacity，这个属性的值处于0-1之间，越小越透明，0为完全透明，1为完全不透明）。
<style>
    div {
        width: 200px;
        line-height: 200px;
        text-align: center;
        color: #fff;
    }
    .box1 {
        position: absolute;
        top: 0;
        left: 10px;
        background-color: red;
        z-index: 1;   /* 提高层级*/
        opacity: .5;  /* 设置透明度*/
    }
    .box2 {
        position: absolute;
        top: 50px;
        left: 60px;
        background-color: blue;
        z-index: 2;  /* 将层级提高到最高*/
        opacity: .5; /* 设置透明度*/
    }
    .box3 {
        position: absolute;
        top: 90px;
        left: 110px;
        background-color: purple;
    }
</style>
<body>
    <div class="box1">第一个盒子</div>
    <div class="box2">第二个盒子</div>
    <div class="box3">第三个盒子</div>
</body>
当然z-index属性后面的数字不是只能写我上面说的1和2.

它的原理是这样的，z-index的数值可以是正整数、负整数或 0，默认值为0，并且值越大，它的层级性越高（即越上），所以只要第二个盒子的z-index的值最大，就会在最上面，第一个盒子的z-index的值小于第二个盒子的z-index的值，并且大于第三个盒子就可以处于中间。当然我们一般位于最下面的就不再额外添加z-index属性了，所以默认为0.

注意点：

① 数字后面不能加单位；
②只有定位的盒子才有 z-index 属性；
③如果属性值相同，假设两个盒子都为z-index:2; 那么后来者居上，即处于后面那个盒子层级高，会处于上方。
④有定位的盒子比没定位的盒子层级高。

JJ_Smilewang

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
如何提高当前盒子的层级

我们在使用定位布局时，可能会出现盒子重叠的情况。一般的层级顺序是根据在html结构中的书写顺序排列的，写在上面的盒子会被压在下面，可我们有时需要把写在后面的盒子放在最上面，虽然我们可以通过更改html里面的书写顺序来调整，但是这未免过于麻烦，所以我们的z-index属性就闪亮登场了，它是用来控制盒子的前后次序 (z轴) 。<style> div { width: 200px; line-height: 200px; text-a
复制链接

扫一扫