布局--元素层级

效果图：

层级说明：
对于开启了定位的元素（非static)，可以通过z-index属性来制定元素的层级
z-index需要一个整数作为参数，整数越大，层级越高，元素的层级越高越优先显示
如果元素的层级一样，则优先显示靠下的元素
层级与定位类型无关

需求：3盖住4
祖先元素的层级再高，也不会盖住后代元素，所以3不会盖住4

[html]

<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4">4</div>
    </div>
</body>

[css]

<style>
    body{
        font-size: 60px;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        position: absolute;
        z-index: 2;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: rgba(255, 0, 0, .3);
        position: absolute;
        top: 50px;
        left: 50px;
    }
    .box3{
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: absolute;
        top: 100px;
        left: 100px;
        z-index: 1;
    }
    .box4{
        width: 100px;
        height: 100px;
        background-color: orange;
        position: absolute;
    }
</style>
posted @ 2020-10-12 10:32  悦颜悦色，柠月清风  阅读(101)  评论(0)    收藏  举报