前端第一阶段-14（z-index调整层级）

BadVictory

已于 2022-08-11 11:20:57 修改

阅读量316

点赞数

分类专栏： # 前端开发第一阶段文章标签：前端 html visual studio visualstudio css3

于 2022-08-05 21:37:20 首次发布

本文链接：https://blog.csdn.net/Victory_bad/article/details/126185398

版权

前端开发第一阶段专栏收录该内容

20 篇文章 4 订阅

订阅专栏

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index调整层级：

所有元素默认z-index:0;
z-index:-1;是在body的下一层
z-index值越大越在上一层
z-index 仅能在定位元素上奏效

调整son2的层级

代码：

<!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>
    <style>
        .father{
            width: 300px;
            height: 500px;
            background: #999;
            /* 相对定位 */
            position: relative;
        }
        .son1{
            width: 150px;
            height: 150px;
            background:blueviolet;
            /* 绝对定位 */
            position: absolute;
            right: 100px;
            top: 10px;
        }
        .son2{
            width: 100px;
            height: 100px;
            background:yellowgreen;
            /* 绝对定位 */
            position: absolute;
            right: 150px;
            top: 15px;
            /* 
                z-index调整层级
                所有元素默认的z-index:0;
                z-index值越大就在上面
            */
            z-index: 1;
        }
        .son3{
            width: 50px;
            height: 50px;
            background: palevioletred;
            /* 绝对定位 */
            position: absolute;
            right: 200px;
            top: 5px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</body>
</html>

效果：