CSS核心（四十六）调整定位元素的显示层级 z-index

人亦已歌 · 发表于 2023-2-1 18:09:18

我们知道，通过定位可以让元素形成层叠结构，那么如何调整哪个元素哪个元素在上呢？类似于PS中对图层的调整，谁压着谁。

在CSS中是通过z-index属性来设置的，z-index属性的取值为数字，该数字没有取值范围，值大的在上，值小的在下。

请看下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>调整定位元素的显示层级 z-index</title>
</head>
<style>
        .box1{
                width:400px;
                height:400px;
                background:#f00;
                position:absolute;
                left:0;
                top:0;                
        }
        .box2{
                width:300px;
                height:300px;
                background:#ff0;
                position:absolute;
                left:0;
                top:0;
                /* 表示为默认层级 定位后下面的元素覆盖上面的元素 */
                /* z-index:auto;                 */
        }
        .box3{
                width:200px;
                height:200px;
                background:#00f;
                position:absolute;
                left:0;
                top:0;
                /* 设置层级关系 -1*/
                /* z-index:-1;                 */
        }
        .box4{
                width:100px;
                height:100px;
                background:#0f0;
                position:absolute;
                left:0;
                top:0;
                
                /* z-index:-2;                 */
        }
        .s1{
                width:100px;
                height:50px;
                background:#F0F;        
                position:absolute;
                left:0;
                top:0;
                /* z-index:9; */
        }
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
        <div class="s1"></div>
</div>
</body>
</html>

以上代码的显示结果为：

CSS核心（四十六）调整定位元素的显示层级 z-index