层叠上下文【stacking context】与层叠顺序【stacking order】

Developer 发布于2019-08-29 11:23 / 2304人阅读

摘要：层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。例当按以下设置，则出现红色在绿色之上的效果。如何触发触发一个元素形成层叠上下文有以下方法，摘自根元素值不为的绝对相对定位一个值不为的项目，即父元素。

层叠上下文【stacking context】

对于stacking context，在MDN中的描述是

Stacking context is the three-dimensional conceptualization of HTML
elements along an imaginary z-axis relative to the user who is assumed
to be facing the viewport or the webpage.HTML elements occupy this
space in priority order based on element attributes.

翻译过来是：
层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
z轴即用户与屏幕间看不见的垂直线。

层叠水平【stacking level】

层叠水平顺序决定了同一个层叠上下文中元素在z轴上的显示顺序

层叠顺序【stacking order】

关于这个，有一张图形可以形象的说明

不过上面图示的说法有一些不准确，按照 W3官方的说法，准确的 7 层为：

the background and borders of the element forming the stacking context.

the child stacking contexts with negative stack levels (most negative first).

the in-flow, non-inline-level, non-positioned descendants.

the non-positioned floats.

the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

the child stacking contexts with positive stack levels (least positive first).

翻译过来是：

形成层叠上下文环境的元素的背景与边框

拥有负 z-index 的子堆叠上下文元素（负的越高越堆叠层级越低）

正常流式布局，非 inline-block，无 position 定位（static除外）的子元素

无 position 定位（static除外）的 float 浮动元素

正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

拥有 z-index:0 的子堆叠上下文元素

拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

一个普通元素具有了层叠上下文，其层叠顺序就会变高。那它的层叠顺序究竟在哪个位置呢？
这里需要分两种情况讨论：

如果层叠上下文元素不依赖z-index数值，则其层叠顺序是z-index:auto可看成z:index:0级别；

如果层叠上下文元素依赖z-index数值，则其层叠顺序由z-index值决定。

所以为什么定位元素会层叠在普通元素的上面？其根本原因就在于，元素一旦成为定位元素，其z-index就会自动生效，此时其z-index就是默认的auto，也就是0级别，根据上面的层叠顺序表，就会覆盖inline或block或float元素。

而不支持z-index的层叠上下文元素天然z-index:auto级别，也就意味着，层叠上下文元素和未设置z-index的定位元素是一个层叠顺序的，于是当他们发生层叠的时候，遵循的是“后来居上”准则。

层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。

如何比较两元素的上下关系

在同一个层叠上下文中，则根据7阶层叠水平比较。若两元素在同一层叠水平，则后来居上，即在DOM流中处于后面的元素会覆盖前面的元素。
在不同的层叠上下文中，则直接比较父元素的层叠水平：
若父元素的z-index不同，则z-index数值越大，越在上面。
若父元素的z-index相同，则在DOM流中处于后面的元素会覆盖前面的元素。

注：

比较时，先看两个元素是不是在同一个父元素之下，若不是，则一层层往上找，直到找到其祖先元素在同一级时停止。然后，再依次往下寻找各自的子元素，找到第一个是层叠上下文元素的子元素后进行比较。

子元素的 z-index 值只在父级层叠上下文中有意义。即父元素的 z-index 低于父元素另一个同级元素，子元素 z-index再高也没用。

例：

当css按以下设置，则出现红色在绿色之上的效果。
原因：要比较div-1-1与div2-1-1的上下，则先找到div1与div2在同一层级。而div1为普通元素,div1-1为层叠上下文元素，div2为层叠上下文元素，所以这时候div2与div1,div1-1在同一个层叠上下文，而div1-1的z-index为1，div2的z-index为1，DOM流中div2在div1-1之后，所以红色在绿色之上。若此时将div1-1的z-index设置为2时，则会出现绿色在红色之上的效果。

.div2 {
    position: absolute;
    z-index: 1;
}

.div1-1 {
    position: absolute;
    z-index: 1;
}

.div2-1 {
    position: absolute;
    z-index: 2;
}

.div1-1-1 {
    background-color: rgba(20, 150, 150, 0.9);
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #e6e6e6;
    font-size: 16px;
    position: absolute;
    z-index: 2;
}

.div2-1-1 {
    background-color: rgba(233, 2, 233, 0.5);
    width: 100px;
    height: 100px;
    margin-left: 70px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #e6e6e6;
    font-size: 16px;
    position: absolute;
    z-index: 3;
}

当在原样式基础上，再添加一个样式，则出现绿色在红色之上的效果，是因为这时候div2与div1在同一个层叠上下文，而div1的z-index为2，div2的z-index为1，所以绿色在红色之上。

.div1 {
    position: absolute;
    z-index: 2;
}

补充：

以下例子中，当将鼠标放在d1-inner上时，会发现d2在d1-inner上面。

原因：不支持z-index的层叠上下文元素天然z-index:auto级别，所以当给d1-inner添加transform: scale(1.7,1.7);时，d1-inner在根元素的层叠上下文中的z-index:auto级别，而d2未设置z-index,所以其z-index就是默认的auto。两者都在根元素的层叠上下文中的z-index:auto级别，那就根据后来居上判断。d1-inner的父元素d1在DOM流中在d2的前面，所以导致d2在d1-inner上面。


 
    d1-inner
  
  
    d2-inner

如何触发

触发一个元素形成层叠上下文有以下方法，摘自 MDN：

根元素 (HTML)

z-index 值不为 "auto"的绝对/相对定位

一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex。（需满足两个条件才能触发：1是父级需要是display:flex或者display:inline-flex水平，2是子元素的z-index不是auto，必须是数值。则这个子元素为层叠上下文元素）

opacity 属性值小于 1 的元素（参考 the specification for opacity）

transform 属性值不为 "none"的元素

mix-blend-mode 属性值不为 "normal"的元素

filter值不为“none”的元素

perspective值不为“none”的元素

isolation 属性被设置为 "isolate"的元素

position: fixed

在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值

-webkit-overflow-scrolling 属性被设置 "touch"的元素

参考自：
深入理解CSS中的层叠上下文和层叠顺序
层叠顺序与堆栈上下文知多少

云服务器 GPU云服务器 stacking-context html层叠顺序 html按钮层叠 html 层叠悬浮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111616.html

z-index

摘要：层叠上下文是中的一个三维的概念如果一个元素含有层叠上下文我们就可以理解为这个元素在轴上就高人一等轴表示用户与屏幕之间并不存在的的垂直线通俗点讲就是人眼看屏幕的视线这条垂直于屏幕的线拥有层叠上下文的元素包括页面根元素天生具有层叠上下文称之为根 stacking context 层叠上下文(stacking context)是HTML中的一个三维的概念.如果一个元素含有层叠上下文,我们就可...

vincent_xyb 2019-08-29 12:38 评论0 收藏0
CSS 中重要的层叠概念

摘要：标签中的一切都被置于这个默认的层叠上下文的一个层叠层上物品放在桌子上。在层叠上下文中，其子元素按照上面解释的规则进行层叠。在中所有的盒模型元素都处于三维坐标系中。最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下...

sshe 2019-08-30 15:54 评论0 收藏0
CSS 层叠上下文（Stacking Context）

摘要：当第二层的容器盒子升级为层叠上下文时，红色盒子及灰色盒子的轴层级受制于第二层的容器盒子。当元素处于同一层叠上下文内时可按照如下规则进行层叠判断。本文首发于政采云前端团队博客：CSS 层叠上下文（Stacking Context）在网页制作的过程中，元素与元素之间的位置关系，在坐标轴上一般可体现为 X 轴、Y 轴和 Z 轴。对于 X 轴和 Y 轴的定位大多数开发都能比较直观的搞清楚...

marek 2019-08-30 15:44 评论0 收藏0
CSS > CSS3 中的层叠上下文初探

摘要：但该盒不建立新的层叠上下文，除非是根元素。以上是基于的层叠上下文介绍。同级情况下，按照二者在源代码中的顺序，居后的又重新占领高地了。现在我们看以下源代码这个时候，以视口为包含块进行定位和大小计算，将会铺满整个屏幕。前言：关于层叠上下文，笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理（表打我，等我校招拿到 offer 了我就读好伐 T_T）。一直听说 CSS3 里的层叠上下文...

pcChao 2019-08-28 18:18 评论0 收藏0
彻底理解z-index，看完还是只会无厘头的设置9999你打我~~~~

摘要：如果同级父元素不是层叠上下文元素就不需要看父元素的眼色了文章到这里就结束了，希望看完这篇文章的同学可以彻底理解。今天写代码用antd-mobile的checkbox时候，想在内容文本后面添加一个icon，并且需要对这个icon绑定事件，发现绑定之后怎么也点不中，调试发现原来被层层嵌套的dom元素盖住了，肯定是z-index在作祟。可是按照我之前对z-index的了解（自信满满）却怎么...

bladefury 2019-08-02 16:16 评论0 收藏0