CSS中层叠上下文如何使用？

发布时间：2023-09-20 12:36:23 所属栏目：语言来源：

导读： 这篇文章主要给大家分享关于CSS中层叠上下文的内容，本文对层叠上下文的概念、特性及使用都有详细的介绍，感兴趣的朋友可以参考，接下来跟随小编来学习一下吧。

在有些 CSS 相互影响作用下，对元素设置的

这篇文章主要给大家分享关于CSS中层叠上下文的内容，本文对层叠上下文的概念、特性及使用都有详细的介绍，感兴趣的朋友可以参考，接下来跟随小编来学习一下吧。

在有些 CSS 相互影响作用下，对元素设置的 z-index 并不会按实际大小叠加，一直不明白其中的原理，最近特意查了一下相关资料，做一个小总结。

层叠上下文与层叠顺序

层叠上下文（stacking content）是 HTML 中的三维概念，也就是元素z轴。层叠顺序（stacking order）表示层叠时有着特定的垂直显示顺序。

层叠准则

谁大谁上

当具有明显的层叠水平标示的时候，如识别的 z-indx 值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

后来居上

当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

层叠上下文的特性

层叠上下文有以下特性：

层叠上下文的层叠水平要比普通元素高；
层叠上下文可以阻断元素的混合模式；
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文；
每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需考虑后代元素；
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的叠层顺序中；

z-index 值不是 auto 的时候，会创建层叠上下文

对于包含 position: relative; position: absolute; 的定位元素，以及 FireFox/IE浏览器下包含 position声明定位的元素，当其 z-index 值不是 auto 的时候，会创建层叠上下文。

HTML 代码
<div class="red-wrapper">
<div class="red">小红</div>
</div>
<div class="gray-wrapper">
<div class="gray">小灰</div>
</div>

CSS代码
.red-wrapper {
position: relative;
z-index: auto;
}
.red {
position: absolute;
z-index: 2;
width: 300px;
height: 200px;
text-align: center;
background-color: brown;
}
.gray-wrapper {
position: relative;
z-index: auto;
}
.gray {
position: relative;
z-index: 1;
width: 200px;
height: 300px;
text-align: center;
background-color: gray;
}
当两个兄弟元素 z-index 都为 auto 时，它们为普通元素，子元素遵循”谁大谁上“的原则，所以小灰 z-index: 1; 输给了小红的 z-index: 2;，被压在了下面

然而当 z-index 变成数值时，就会创建一个层叠上下文，各个层叠元素相互独立，子元素受制于父元素的层叠顺序。将兄弟元素的 z-index 从 auto 变成了数值 0，他们的子元素的之间的层叠关系就不不受本身 z-index 的影响，而是由父级元素的 z-index 决定。

下面小红和小灰的父级的 z-index 都调整成 0
.red-wrapper {
/* 其他样式 */
z-index: 0;
}
.gray-wrapper {
/* 其他样式 */
z-index: 0;
}
就会发现小灰在小红的上面了，因为小灰的父级和小红的父级都变成了层叠上下文元素，层叠级别一样，根据文档流中元素位置”后来居上“原则。

（编辑：汽车网）

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