z-index与堆叠上下文

Aldous 发布于2019-08-29 13:23 / 2025人阅读

摘要：与堆叠上下文动机最近项目中同时使用和遇到一些问题，值设了很大，但是不起作用。总结设置且不为，将产生堆叠上下文，堆叠规则异于常规堆叠。，，生效产生堆叠上下文，分别是。此时生成堆叠上下文，其子元素最终为。

z-index与堆叠上下文 动机

最近项目中同时使用z-index和opacity遇到一些问题，z-index值设了很大，但是不起作用。找了一些资料，重新梳理了z-index的重叠规则。

z-index

MDN中z-index的描述为：用于指定已经定位的元素（即position:relative/absolute/fixed）在文中的堆叠顺序。按照数值放置，高的在上面。
当z-index不为auto时，将产生堆叠上下文（stacking context）。下面结合几个例子说说堆叠上下文是什么。

常规堆叠顺序

没有使用z-index时，默认z-index:auto，此时>不会产生堆叠上下文（stacking context），所有元素都处在同一层，同父元素的层级。

The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent"s box.

此时堆叠顺序如下（从下到上）：

根元素（即HTML元素）的background和borders

正常流中非定位后代元素（这些元素顺序按照HTML文档出现顺序，后面的会覆盖前面的）

浮动元素

正常流中已定位后代元素（这些元素顺序按照HTML文档出现顺序，后面的会覆盖前面的）

下面看看例子：

 #absdiv1 {
        position: absolute;
        width: 150px;
        height: 200px;
        top: 10px;
        right: 140px;
        border: 1px dashed #990000;
        background-color: #ffffffdd;
    }

    #normdiv {
        height: 100px;
        border: 1px dashed #999966;
        background-color: #ffffcc;
        margin: 0px 10px 0px 10px;
        text-align: left;
    }

    #flodiv1 {
        margin: 0px 10px 0px 20px;
        float: left;
        width: 150px;
        height: 200px;
        border: 1px dashed #009900;
        background-color: #ccffcc;
    }

    #flodiv2 {
        margin: 0px 20px 0px 10px;
        float: right;
        width: 150px;
        height: 200px;
        border: 1px dashed #009900;
        background-color: #ccffcc;
    }

为了说明效果，div按照相反的堆叠顺序放置


        
DIV #1
        
position: absolute;
    

    
        
DIV #2
        
float: left;
    

    
        
DIV #3
        
float: right;
    

    

    
        
DIV #4
        
no positioning

在没有z-index的情况下，html顺序为#1->#2->#3->#4->#5，渲染顺序为#4(正常流中非定位后代元素)->#2(浮动元素)->#3(浮动元素)->#1(正常流中已定位后代元素)->#5(正常流中已定位后代元素)。

上述是没有z-index时的默认情况，渲染层就是layer 0。

z-index生成堆叠上下文改变堆叠顺序

z-index有几个关键点：

只适用于已经定位的元素(即position:relative/absolute/fixed)

渲染顺序按照z-index大小，从低到高

z-index生效时将产生堆叠上下文
可以看到，由于#1，#3，#5设置了position，z-index生效，而 #2和#4未生效，z-index:0。

上面div都是同级的，下面看看在子元素中设置z-index的情况。在#3中加入子元素#6 #7，在#4中设置子元素#8。

#3中的子元素#6 #7虽然设置了z-index：10,z-index：11，但仍处于#1的下面。这是因为#3的z-index 生效，生成了堆叠上下文（stacking context），而处在堆叠上下文的元素的z-index只在当前父元素下有效，子堆叠上下文被看做是父堆叠上下文中一个独立的模块，相邻的堆叠上下文完全没关系。

再来看看#4中的子元素#8，由于#4的没有设置position，因此z-index无效，还处在z-index:0中，且没有生成堆叠上下文。而子元素#8 z-index生效，将和#5,#3,#1处在同级，在#3之后，#4之前。

总结：

设置position且z-index不为auto，将产生堆叠上下文，堆叠规则异于常规堆叠。

处在堆叠上下文的元素的z-index只在当前父元素下有效，子堆叠上下文被看做是父堆叠上下文中一个独立的模块，相邻的堆叠上下文完全没关系。意味着如果一个元素位于一个最低位置的层，那你z-index设置得再大，它也不会出现在其它层元素的上面。我们可以将产生上下文堆叠的层级按照如下规则理解：

#2，#4z-index未生效（未产生堆叠上下文），同父元素（html）的设置，值为默认auto，即0。

#1，#3，#5 z-index生效（产生堆叠上下文），分别是4,3,1。

#6,#7的父元素#3为3，故#6为3.10（z-index生效，产生堆叠上下文）,#7为3.0（z-index未生效，未产生堆叠上下文）

#8父元素#2 为0，#8 z-index生效（产生堆叠上下文），为3.

产生堆叠上下文的几种情况

除了z-index+position，[MDN-stacking_context]中列举了产生堆叠上下文的几种情况。

HTML根文档

当一个元素position为(absolute或relative)，且拥有一个z-index值（不为auto）

当一个元素position为fixed或sticky

当一个元素是flexbox的子元素，且拥有一个z-index值（不为auto）

当一个元素被设置了opacity（小于1），transforms, filters, perspective，clip-path，css-regions, paged media，mask / mask-image / mask-border，mix-blend-mode（不为normal）, isolation (值为isolate)，-webkit-overflow-scrolling （值为touch），will-change 等属性。

以opacity为例,我们在#4上加入opacity:0.5。此时#4生成堆叠上下文，其子元素#8最终为0.3。在#1,#3,#5之下。

参考文献

https://developer.mozilla.org...
https://developer.mozilla.org...
http://www.myexception.cn/HTM...
http://blog.csdn.net/u0143463...
http://www.w3cplus.com/css/wh...
https://www.w3.org/TR/CSS2/zi...

GPU云服务器云服务器堆叠堆叠服务器 z-index 服务器堆叠技术

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

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

理解 CSS 的 z-index 属性

摘要：通常认为页面是二维的，但实际上，还有一个属性，允许层叠元素。所有的盒模型元素都处于三维坐标系中。多个元素的属性相同时，将按照上文描述的顺序布局。使用排序的例子注意，的无效，因为未指定属性。每个堆叠上下文和它的同级上下文是独立的。通常认为HTML页面是二维的，但实际上，CSS还有一个z-index属性，允许层叠元素。所有的盒模型元素都处于三维坐标系中。除了我们常用的横坐标和...

cangck_X 2019-08-28 17:51 评论0 收藏0
图解一下啥是CSS堆叠上下文，啥是CSS堆叠层叠顺序，让你对css的疑惑少一点?

摘要：即浮动元素是在文字区域与块级元素之间的。堆叠上下文也是类似的道理，你很难说出什么是堆叠上下文，但只要它满足列出的几种情况，它就是堆叠上下文。这就是堆叠上下文一个特性。 CSS 堆叠上下文是啥？我们有一个基本样式的 div，样式如下： div{ width: 200px; height: 200px; border:10px solid red; pad...

GitChat 2019-08-29 16:55 评论0 收藏0
层叠上下文【stacking context】与层叠顺序【stacking order】

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

Developer 2019-08-29 11:23 评论0 收藏0
css中那些需要组合、互斥和特别注意的属性

摘要：盒子的偏移位置不影响常规流中的任何元素，其不与其他任何折叠。当的值为非时，其层叠级别通过属性定义。最常见的有简称和简称。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 css学习很少有人会很系统的把css学习一遍，大部分都是遍历下。然后然后记住常用的，不常用的也要回查找，前端人很多都认同要学好css真的不很难，这里记录下很多场景下使用css需要注意的地方，同样，开头页列出一...

plokmju88 2019-08-29 13:44 评论0 收藏0
切图系列：W3C奇技淫巧之层叠上下文

摘要：同一个层叠上下文中，层叠级别相同的两个元素，依据它们在文档流中的顺序，写在后面的将会覆盖前面的。因此，元素的层叠关系不仅与它在堆叠上下文中所属的层叠级别有关，还与它所在的堆叠上下文的顺序有关。 w3c规范里的stacking context，译作层叠上下文，最主要的作用还是用来比较一个拥有定位元素（position:!static）的元素的z轴层叠关系（z-index）。先上一个经典...

pcChao 2019-08-28 18:26 评论0 收藏0