元素的层级 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                background-color: red;
                position: relative;
            }
            .box2{
                width: 200px;
                height: 200px;
                background-color: yellow;
                /*开启绝对定位*/
                position: absolute;
                /*设置偏移量*/
                top: 100px;
                left: 100px;
                /*
                    如果定位元素层级一样，则下边的元素会盖住上边
                    通过z-index属性可以设置元素的层级
                    可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
                        层级越高越优先显示
                        
                    对于没有开启定位的元素不能使用z-index
                */
               z-index: 1;
            }
            .box3{
                position: relative;
                width: 200px;
                height: 200px;
                background-color: yellowgreen
               
            }
            .box4{
                width: 200px;
                height: 200px;
                background-color: orange;
                
                position: relative;
                /*
                    父元素层级再高也不会盖住子元素
                */
                z-index: 20;
            }
            .box5{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                position: absolute;
                z-index: 10;
            }
        </style>
    </head>
    <body style="height: 5000px;">
        <div class="box1"></div>        
        <div class="box2"></div>                        
        <div class="box3"></div>
        <div class="box4">
            <div class="box5"></div>
        </div>
        
        
    </body>
</html>

如果定位元素层级一样，则下边的元素会盖住上边
通过z-index属性可以设置元素的层级
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
　　层级越高越优先显示

对于没有开启定位的元素不能使用z-index

posted @ 2021-07-06 11:30  2237774566  阅读(55)  评论(0)    收藏  举报