发布日期: 2024-03-14

元素显示的进一步优化

元素层级

属性介绍

上一节结尾我们留了一个问题，即一堆元素仍在一个HTML里面，这些玩意的层级怎么控制？需要记很多的结论嘛？

我们在这里给出答案，完全不必要。

我们在Css中有这样一个属性， z-index 其存在最重要的意义就是调整页面中一堆元素的显示层级。

z-index: 100;
/* 后面跟一个整数，这数越大，显示的就越靠上，默认值为0 */

提一嘴，这个玩意是可以设置成负值的，全看读者的习惯。

当然，这玩意必须是用于定位（position）存在的情况下的，毕竟如果没有position的属性，页面上的元素压根不会相互遮挡是不是。

父子关系 vs 元素层级？

有的读者可能挺好奇的，那我们平常子盒子总会默认显示在父盒子的上侧，我们有没有可能通过这个元素层级来让父盒子完全盖住子盒子？

答案是肯定的，但需要一定的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>
</html>

哎，我们一看，挺成功，就显示了父盒子的颜色。

但需要说明的是，如果我们这样设置：

.father{
    ...
    z-index:100;
}
.son{
    ...
    <!-- z-index: -->
    <!-- 即子盒子不写z-index属性，仅通过父盒子设置 -->
}

我们会发现没法子，子盒子还是在父盒子上边。
所以，这位置需要读者记忆一下。

定位（确实，还是定位）

居中，彻彻底底的居中！

此前第五部分说过了定位的事，为什么这里还要提？

这是因为通过定位，我们可以实现一个之前没试过的效果： 让元素垂直居中 。

我们知道，让元素水平居中是很容易做到的：

margin: 0 auto;

但我们现在学了定位了，竖直居中就可以通过 绝对定位 来实现。

我们首先想到的应该是这个：

position: absoulte;
top:50%
left:50%

读者可以试一下，我们会发现，这样搞的话就移大劲了，它移到了页面的中间偏右下方，这是由于两个50%分别是 页面顶部距离上边框的距离 和 页面左侧距离左边框的距离 。

那咋办捏？
好办，我们在说margin的时候单独提了一嘴，这玩意是支持负值的设置的，这时候就显出作用了。

div{
    width: 100px;
    height: 100px;
    position: absoulte;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

哎，我们把这玩意通过负的margin再给它拽回来就完事了嘛。

相似的，我们如果要实现子盒子在父盒子里面的居中，自然也可以使用这种方法，无非是在父盒子里面设定一个 position: relative 而已。

绝对定位 vs 浮动

这俩玩意相信很多读者都懵的慌。

这里笔者仅仅给出一个不十分严谨的说法，即浮动是 半脱离文档流 ，而绝对定位是 完全脱离文档流 。

这会造成一个什么差别捏？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box2{
            width: 500px;
            height: 500px;
            background-color: aqua;
        }
        .box1{
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            /* float: left; */
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iusto debitis expedita delectus. Voluptates odit recusandae earum praesentium, quia incidunt suscipit expedita magni labore nemo velit animi molestias, odio voluptate aliquam!
    </div>
</body>
</html>

上面 ⬆ ，展现了绝对定位的情况，我们发现这绝对定位的盒子是一点面子也不给，直接碾着下面盒子里的内容。

如果我们改成:

.box2{
    width: 500px;
    height: 500px;
    background-color: aqua;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    /* position: absolute; */
    float: left;
}