层的叠放顺序z-index

正在修炼web的小芮

于 2022-07-07 17:11:40 发布

阅读量110

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_71814235/article/details/125663168

版权

css 专栏收录该内容

35 篇文章

订阅专栏

本文详细解释了z-index在CSS定位中的作用，包括z-index值的含义、适用场景、单位和优先级规则。通过实例演示了如何通过z-index控制绝对定位元素的堆叠顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

● z-index值表示谁压着谁。数值大的压盖住数值小的。

● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

● z-index值没有单位，就是一个正整数。默认的z-index值是0。

● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

● 从父现象：父亲怂了，儿子再牛也没用。

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 800px;
            height: 800px;
            /* 边框 */
            border: 10px solid pink;
            margin: 20px auto 0;
            /* 轮廓线，边框和轮廓线选其一写上 */
            /* outline: 1px dashed green; */
            /* 相对定位 */
            position: relative;
        }
        .son{
            width: 200px;
            height: 200px;
            /* 绝对定位 */
            position: absolute;
        }
        .son1{
            background-color: yellow;
            left: 150px;
            top: 150px;
            /* 需要谁在上面就赋予谁的值最大 */
            z-index: 0;
        }
        .son2{
            background-color: yellowgreen;
            left: 230px;
            top: 230px;
            z-index: 0;
        }
        .son3{
            background-color: skyblue;
            left: 350px;
            top: 350px;
            z-index: 0;
        }
    </style>
</head>
<body>
    <!-- .parent>.son.son1+.son.son2+.son.son3 -->
    <div class="parent">
        <div class="son son1"></div>
        <div class="son son2"></div>
        <div class="son son3"></div>
    </div>
</body>

预览图