z-index实现元素叠放次序

Try Tomato

已于 2022-03-08 18:11:40 修改

阅读量443

点赞数 1

于 2022-03-08 09:36:49 首次发布

本文链接：https://blog.csdn.net/weixin_63836026/article/details/123344967

版权

+ HTML & CSS 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

我们定义了一个A元素，之后再定义一个B元素，如果俩个元素之间有重叠部分的话，B元素会压在A元素上面，这是因为我们的的代码执行是从上往下执行的，先执行显示出A元素，当A元素执行完毕之后，再执行B元素，B元素必定会压在A元素之上。

那我们想让B元素显示在A元素之上，有没有什么好的办法呢？

当然有！我们使用z-index命令就可以实现了

我们先使用代码实现出原始状态：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box-A{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: #a52a2a;
        /* 我们设置第一个盒子为红颜色 */
        border-radius: 20px;
    }
    .box-B{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: #2aa013;
        /* 我们设置第二个盒子为绿颜色 */
        border-radius: 20px;
    }
</style>
<body>
    <div class="box-A"></div>
    <div class="box-B"></div>
</body>
</html>

我们设置了俩个盒子，为什么只显示了B元素的绿盒子呢？我们F12检查一下：

发现确实有俩个盒子,只是位置绿盒子在红盒子之后执行，把我们的红盒子压在了下面，所以我们看不到，但它是存在的。

现在我们使用z-index来操作一下，看一下是否可以实现让红盒子显示出来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box-A{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: #a52a2a;
        /* 我们设置第一个盒子为红颜色 */
        border-radius: 20px;
        z-index: 99;
        /* 我们给到红盒子的z-index值为99 */
    }
    .box-B{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: #2aa013;
        /* 我们设置第二个盒子为绿颜色 */
        border-radius: 20px;
        z-index: 1;
        /* 我们给到绿盒子的z-index值为1  */
    }
</style>
<body>
    <div class="box-A"></div>
    <div class="box-B"></div>
</body>
</html>

我们打开浏览器观察：