CSS---z-index

最新推荐文章于 2022-08-26 11:46:58 发布

杨旭华　

最新推荐文章于 2022-08-26 11:46:58 发布

阅读量345

点赞数 2

本文链接：https://blog.csdn.net/Yxh666/article/details/102907786

版权

z-index

z-index表示谁压着谁，数值大的会压盖住数值小的
只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位了的原色它们才会拥有z-index
z-index的值是没有单位的值是一个正整数默认的z-index的值是0
如果多个定位元素没有设置z-index属性或者z-index值设置一样，那么写在HTML后面的定位元素就会压盖住前面的定位元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>z-index</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .div1{
            background-color: #f00;
        }
        .div2{
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

效果：
在这里插入图片描述

... ...
        .div1{
            background-color: #f00;
            /*绝对定位*/
            position:absolute;
            /*定位的坐标*/
            left: 100px;
            top: 100px;
        }
        .div2{
            background-color: #00f;
            /*绝对定位*/
            position:absolute;
            /*定位的坐标*/
            left: 200px;
            top: 200px;
        }
... ...

效果图如下：
在这里插入图片描述

... ...
</head>
<body>
    <div class="div2"></div>
    <div class="div1"></div>
</body>
</html>

在这里插入图片描述

.div1与.div2都设置了绝对定位所以它们就拥有了z-index属性，但是并没有给其设置z-index属性，没有设置z-index属性那么它们的值就为0
我们要观察HTML中的结构
.div1这个元素它写在.div2的后面，然后就能知道.div1这个元素就会压盖住.div2

以上都没有设置z-index属性，下面我们设置z-index属性

... ...
        .div1{
            background-color: #f00;
            /* 绝对定位 */
            position: absolute;
            /* 定位的坐标 */
            left: 100px;
            top: 100px;
            z-index: 1;     /*设置z-index*/
        }
        .div2{
            background-color: #00f;
            /* 绝对定位 */
            position: absolute;
            /* 定位的坐标 */
            left: 200px;
            top: 200px;   
            z-index: 2; /*设置z-index*/
        }
... ...

以上我们设置了z-index

注意：
数值大的z-index会压住数值小的
在这里插入图片描述
可以看到之前没加z-index的时候是红色块压住了蓝色块，现在我们加了z-index，是蓝色压住了红色块，所以说，z-index数值大的会压盖住数值小的
如果数值相等，就会判断html结构了

杨旭华　

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS---z-index

z-indexz-index表示谁压着谁，数值大的会压盖住数值小的只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位了的原色它们才会拥有z-indexz-index的值是没有单位的值是一个正整数默认的z-index的值是0如果多个定位元素没有设置z-index属性或者z-index值设置一样，那么写在HTML后面的定位元素就会压盖住前面的定位元素<...
复制链接

扫一扫