欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

CSS里的层次结构：理解与应用元素分级

最编程 2024-07-26 15:33:24
...

元素开启定位之后会提升自己的层级。
无论是什么定位，提升后的层级都是一样的，所以后面的开启定位给的元素会盖住前面的开启定位的元素。
eg
:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: salmon;
            position: absolute;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(57, 194, 103);
            position: absolute;
            top: 50px;
            left: 50px;
        }
        .box3{
            width: 200px;
            height: 200px;
             background-color: rgb(134, 114, 250);
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .box4{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 227, 103);
            position: absolute;
            top: 150px;
            left: 150px;
        }
        .box5{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 202, 103);
            position: relative;
            top: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    
</body>
</html>

输出：
在这里插入图片描述

上一篇： 在cocosCreator中调整和变更节点层级

下一篇： 元素的特性、结构与操作节点详解

推荐阅读