CSS层叠与层叠等级

发布时间：2023-12-17 19:24:34 所属栏目：语言来源：DaWei

导读： 这篇文章给大家分享的是CSS层叠的相关内容，本文介绍了CSS层叠是什么，层叠等级以及，z-index 对层叠等级的影响，对大家学习会有一定的帮助，有需要的朋友可以参考，接下来就跟随小编一起了

这篇文章给大家分享的是CSS层叠的相关内容，本文介绍了CSS层叠是什么，层叠等级以及，z-index 对层叠等级的影响，对大家学习会有一定的帮助，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

层叠与层叠等级

HTML 元素是一个三维的概念，除了水平和垂直方向外，还会在“z 轴”上层层叠加。既然是叠加，就会涉及到先后顺序的问题，规范中称之为“层叠等级”。

默认情况下，图文是网页的核心，因此内联元素的等级理应最高；然后是布局，其中浮动元素（脱离文档流）的等级高于块级元素；最低等级是设置背景、边框等装饰属性的元素。

例子：

<style>
.f {
background-color: #ccffcc;
border: 1px dashed #669966;
padding: 10px;
}

.f div:first-of-type,
.f div:last-of-type {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 200px;
height: 70px;
margin-left: 10px;
}

.f div:last-of-type {
background-color: rgba(221, 221, 255, .8);
border: 1px dashed #000099;
float: left;
margin-top: -90px;
margin-left: 30px;
}

label {
background-color: rgba(247, 236, 27, 0.8);
border: 1px dashed #FFC107;
padding: 5px;
}
</style>

<div class="f">
<label>hello</label>
<div></div>
<div></div>
</div>

如果元素发生了层叠，层叠等级大的会覆盖小的；如果二者层叠等级相同，根据渲染的顺序，后者会覆盖前者。

例子：

<style>
.f {
background-color: #ccffcc;
border: 1px dashed #669966;
padding: 10px;
overflow: hidden;
}

.f div:first-of-type,
.f div:last-of-type {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 200px;
height: 70px;
float: left;
}

.f div:last-of-type {
background-color: rgba(221, 221, 255, .8);
border: 1px dashed #000099;
margin-top: -40px;
margin-left: 30px;
}
</style>

<div class="f">
<div></div>
<div></div>
</div>

z-index 可以影响层叠等级

如果需要修改元素的层叠等级，可以在已定位的元素(1)上使用 z-index。

z-index 可以取正整数，0 或负整数；如果没有 z-index （默认 z-index:auto ）或者 z-index 手动设置为 auto，则视为 0 处理。

实际工作中， z-index 取负值可以实现隐藏元素的效果。但如果为父元素创建层叠上下文，子元素就会隐藏不掉：

例子：

<style>
.f {
background-color: rgba(204, 255, 204, .8);
border: 1px dashed #669966;
padding: 10px;
position: relative;
z-index: 0;
}

.f div {
background-color: rgba(255, 221, 221, .8);
border: 1px dashed #990000;
width: 200px;
height: 70px;
position: relative;
top: 45px;
z-index: -1;
}
</style>

<div class="f">
<div></div>
</div>

前后例子对比之后，已经很明显的表明，不管 z-index 的负值多大，依然无法突破当前层叠上下文。

现在大家对于CSS层叠应该有一定的了解了吧，z-index 对层叠等级的影响大家要注意。

（编辑：湘西站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!