Web前端层级属性

最新推荐文章于 2022-10-25 19:11:16 发布

山人甲

最新推荐文章于 2022-10-25 19:11:16 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： web 前端

本文链接：https://blog.csdn.net/weixin_44252534/article/details/87923128

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山人甲</title>
    <style>

        /*层级属性 z-index: n (+ 提高 - 降低)

        值越大  层级越高
        */
        div {
            width: 200px;
            height: 200px;
            float: left;
        }
        .red {
            background-color: #a71d5d;  /*0*/
            /*只有拥有绝对定位才能设置层级属性*/
           /* z-index: 9999;*/
        }
        .blue {
            /*绝对定位的元素层级被提高 比标准流层级高*/
            background-color: deepskyblue;
            position: absolute;
            left: 30px;
            top:30px;
            z-index: -9;
        }
        /*黄色层级比蓝色的更大*/
        .yellow {
            background-color: gold;
            position: absolute;
            left: 60px;
            top:60px;
            z-index: -12;
        }
    </style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
</body>
</html>