CSS中层叠上下文的使用方法

这篇文章给大家分享的是有关CSS中层叠上下文的使用方法的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、网络空间、营销软件、网站建设、申扎网站维护、网站推广。

前言

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

层叠上下文与层叠顺序

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

层叠准则

谁大谁上

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

后来居上

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

层叠上下文的特性

层叠上下文有以下特性：

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

CSS中层叠上下文的使用方法

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

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

HTML 代码


    小红

.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; }

.wrapper { display: flex; } .gray { z-index: 1; width: 200px; height: 300px; text-align: center; background-color: gray; } .red { z-index: -1; width: 300px; height: 200px; text-align: center; background-color: brown; position: relative; }

.gray { z-index: 1; width: 200px; height: 300px; text-align: center; background-color: gray; opacity: 0.5; } .red { z-index: -1; width: 300px; height: 200px; text-align: center; background-color: brown; position: relative; }

大橙子网站建设，新征程启航

CSS中层叠上下文的使用方法

其他资讯