css3学习：opacity会形成隐式堆叠，什么意思？z-index无效，为什么？堆叠上下文（2）

最新推荐文章于 2022-10-09 15:24:08 发布

漫游者码农

最新推荐文章于 2022-10-09 15:24:08 发布

阅读量513

点赞数

分类专栏： css3学习

本文链接：https://blog.csdn.net/xu2034029667/article/details/97277088

版权

css3学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

问题抛出：遇到过父元素给opacity：.1，然后子元素似乎也继承了这个透明度为.1,然而给子元素opacity:1十分抱歉，没有任何效果，到底是为什么？

另外一个问题是明明有元素z-index值是小于某元素z-index，但是仍然不在最上层，发生问题的根源在于，我们对透明度，和z-index原理，理解的并不深刻，或是太片面理解。

关于z-index理解

找出沿Z轴的堆叠元素的渲染顺序的简单方法是将其视为各种类型的“版本号”，

我们先说z-index的问题，为了理解这个属性，情况例子是最好不过的手段，

第一部分：定义及其他

在本文的前一部分中，使用z-index，某些元素的呈现顺序受其z-index值的影响。发生这种情况是因为这些元素具有特殊属性，导致它们形成堆叠上下文。

堆栈上下文在文档中的任何位置由以下方案中的任何元素形成：

文档的根元素（<html>）。
元素与position值absolute 或者relative 和z-index比其他价值auto。
带有position值的元素fixed 或sticky （适用于所有移动浏览器，但不适用于较旧的桌面）。
作为flex（flexbox）容器的子元素的元素，其z-index值不是auto。
作为grid（grid）容器的子元素的元素，其z-index值不是auto。
opacity值小于的元素1（请参阅不透明度规范）。
元素mix-blend-mode值不是normal。
具有以下任何属性的元素，其值不是none：
具有isolation值的元素isolate。
具有-webkit-overflow-scrolling值的元素touch。
带有will-change值的元素，指定将在非初始值上创建堆叠上下文的任何属性（请参阅此文章）。
contain值为layout或的元素，或paint包含其中任何一个的复合值（即contain: strict，contain: content）。

在堆叠上下文中，子元素根据先前解释的相同规则堆叠。重要的是z-index，其子堆叠上下文的值仅在此父级中具有含义。堆叠上下文在父堆叠上下文中作为单个单元原子地处理。

综上所述：

堆叠上下文可以包含在其他堆叠上下文中，并一起创建堆叠上下文的层次结构。
每个堆叠上下文完全独立于其兄弟：在处理堆叠时仅考虑后代元素。
每个堆叠上下文都是自包含的：在堆叠元素的内容之后，整个元素被视为父堆叠上下文的堆叠顺序。

注意：堆叠上下文的层次结构是HTML元素层次结构的子集，因为只有某些元素才会创建堆叠上下文。我们可以说，不创建自己的堆叠上下文的元素被父堆栈上下文同化。

这个例子Section

使用z-index修改的堆叠规则示例

在此示例中，每个定位元素都会创建自己的堆叠上下文，因为它们的位置和z-index值。堆叠上下文的层次结构如下：

根
- DIV＃1
- DIV＃2
- DIV＃3
  - DIV＃4
  - DIV＃5
  - DIV＃6

值得注意的是，DIV＃4，DIV＃5和DIV＃6是DIV＃3的孩子，因此在DIV＃3中完全解决了这些元素的堆叠。一旦DIV＃3内的堆叠和渲染完成，整个DIV＃3元素就相对于其兄弟的DIV传递以在根元素中堆叠。

笔记：

DIV＃4在DIV＃1下呈现，因为DIV＃1的z-index（5）在根元素的堆叠上下文中有效，而DIV＃4的z-index（6）在DIV＃3的堆叠上下文中有效。因此，DIV＃4属于DIV＃1，因为DIV＃4属于DIV＃3，其具有较低的z-index值。
出于同样的原因，DIV＃2（z-index 2）在DIV＃5（z-index 1）下呈现，因为DIV＃5属于DIV＃3，其具有更高的z-index值。
DIV＃3的z-index是4，但是该值独立于DIV＃4，DIV＃5和DIV＃6的z-index，因为它属于不同的堆叠上下文。
找出沿Z轴的堆叠元素的渲染顺序的简单方法是将其视为各种类型的“版本号”，其中子元素是其父级主要版本号下面的次要版本号。通过这种方式，我们可以很容易地看到z-index为1（DIV＃5）的元素如何堆叠在z-index为2（DIV＃2）的元素上方，以及z-index为6的元素如何（DIV＃4）堆叠在z-index为5（DIV＃1）的元素下面。在我们的示例中（根据最终渲染顺序排序）：
- 根
  - DIV＃2 - z-index是2
  - DIV＃3 - z-index是4
    - DIV＃5 - z-index为1，堆叠在z-index为4的元素下，导致渲染顺序为4.1
    - DIV＃6 - z-index为3，堆叠在z-index为4的元素下，导致渲染顺序为4.3
    - DIV＃4 - z-index为6，堆叠在z-index为4的元素下，导致渲染顺序为4.6
  - DIV＃1 - z-index是5

第二部分：没有z-index属性的堆栈

如果z-index未在任何元素上指定属性，则元素按以下顺序堆叠（从下到上）：

根元素的背景和边框
随后的非定位块，按HTML中的外观顺序排列
后代按照HTML中的外观顺序定位元素

请记住，当order属性改变flex容器中“HTML中的外观顺序”的呈现时，它同样会影响堆叠上下文的顺序。

在下面的示例中，元素＃1到＃4是定位元素。元素＃5是静态的，因此在其他四个元素下面绘制，即使它稍后出现在HTML标记中。

第三部分：根堆叠上下文

堆叠上下文示例1Section

让我们从一个基本的例子开始。在根堆叠上下文中，我们有两个DIV（DIV＃1和DIV＃3），两者都相对定位，但没有z-index属性。在DIV＃1中有一个绝对定位的DIV＃2，而在DIV＃3中有一个绝对定位的DIV＃4，两者都没有z-index属性。

唯一的堆叠上下文是根上下文。没有z索引，元素按发生顺序堆叠。

堆叠上下文示例1

如果为DIV＃2分配了一个正（非零和非自动）z-index值，则将其呈现在所有其他DIV之上。

堆叠上下文示例1

然后，如果还为DIV＃4分配了大于DIV＃2的z-index的正z-index，则将其呈现在包括DIV＃2的所有其他DIV之上。

堆叠上下文示例1

在最后一个示例中，您可以看到DIV＃2和DIV＃4不是兄弟节点，因为它们属于HTML元素层次结构中的不同父节点。即便如此，可以通过z-index控制DIV＃4相对于DIV＃2的堆叠。碰巧的是，由于DIV＃1和DIV＃3未分配任何z-index值，因此它们不会创建堆叠上下文。这意味着它们的所有内容（包括DIV＃2和DIV＃4）都属于相同的根堆叠上下文。

在堆叠上下文方面，DIV＃1和DIV＃3简单地被同化到根元素中，结果层次结构如下：

根堆叠上下文
- DIV＃2（z-index 1）
- DIV＃4（z-index 2）

注意： DIV＃1和DIV＃3不是半透明的。重要的是要记住，为定位元素指定小于1的不透明度会隐式创建堆叠上下文，就像添加z-index值一样。此示例显示了父元素未创建堆叠上下文时发生的情况。

内容主要来自：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

总结就是：没有堆叠上下文，跟着根上下文显示，

有堆叠上下文，根据版本模式，判断显示层级，

结尾强调一些，真的还是看这些相对专业网站，天下武功独出少林，一些大佬的讲解，例子，个人而言，这个文档的讲解，例子还是更好理解，假如耐心一点看，

以上主要是关于z-index的总结，果然还是要了解原理，希望能够给大家一些启发和帮助。

漫游者码农

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3学习：opacity会形成隐式堆叠，什么意思？z-index无效，为什么？堆叠上下文（2）

问题抛出：遇到过父元素给opacity：.1，然后子元素似乎也继承了这个透明度为.1,然而给子元素opacity:1十分抱歉，没有任何效果，到底是为什么？另外一个问题是明明有元素z-index值是小于某元素z-index，但是仍然不在最上层，发生问题的根源在于，我们对透明度，和z-index原理，理解的并不深刻，或是太片面理解。关于z-index理解找出沿Z轴的堆叠元素的渲染顺序的简单...
复制链接

扫一扫