摘要：上篇文章半透明效果的属性和场景最后提到了层叠上下文，在这篇文章中就说说和层叠上下文。探索一使用生成的层叠上下文会压盖基本元素。仔细一想，层叠上下文的概念还是挺好理解的，比和都简单一些。
上篇文章《CSS半透明效果的属性和场景》最后提到了层叠上下文，在这篇文章中就说说opacity和层叠上下文。建议读者在读本篇文章之前，先仔细阅读张鑫旭大神的《深入理解CSS中的层叠上下文和层叠顺序》，并自己动手实践多种生成层叠上下文的方法。
探索一：使用opacity生成的层叠上下文会压盖基本元素。
如下图所示，块状元素的opacity不为1，形成了层叠上下文，无论行内元素在块状元素的前或后，都被块状元素压盖。
探索二：两个通过opacity创建层叠上下文的元素，层叠顺序是：出现顺序靠后的元素在上面。
如下图所示，具有相同或不同opacity的元素总是后出现的在上面。由此我们可以得知，opacity的改变不会改变层叠顺序。
探索三：若两个元素分别用z-index，opacity创建了层叠上下文，那么如何判断层叠顺序？
其实每个元素都有z-index，默认值为auto，z-index为0的效果等同于z-index为auto的效果。我们可以把用opacity创建的层叠上下文的z-index看作auto，所以两个层叠上下文，层叠顺序由z-index决定，z-index较大的元素在上面，z-index相同（0==auto）则出现靠后的元素在上面。
探索四：不同的层叠上下文只能依靠z-index来确定层叠顺序？
笔者做了实验，如下图所示，分别为block和inline元素使用opacity创建了层叠上下文，其层叠顺序是后出现的元素在上面。所以说元素种类也不影响层叠顺序。在测试其他CSS3属性是否能影响层叠顺序之前，笔者猜想：只有通过修改z-index值才能改变不同层叠上下文的层叠顺序。
顺便说一句，z-index 仅能在定位元素上奏效，定位（position：relative/absolute/fixed）+z-index（不为auto）可以实现创建层叠上下文，父元素display:flex/inline-flex的元素可被创建了层叠上下文。无论是哪种方式，层叠顺序是：z-index更大的元素在上面，z-index相同，出现顺序靠后的在上面。
下图是relative+z-index的示例，无论z-index为0的元素出现z-index为1的元素的前或者后，都被z-index为1的元素压盖，z-index都为1的不同元素，总是后出现的在上面。在笔者的实验中，保持这三个元素的z-index不变，将position改为absolute或者fixed，或者把三个元素的父盒子的display改为flex/inline-flex，层叠顺序不变。
仔细一想，层叠上下文的概念还是挺好理解的，比BFC和IFC都简单一些。不过在使用起来，也容易踩坑。下次在设计页面结构的时候，能提前注意到不同的层叠上下文，也就能避免一些问题了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116622.html
摘要：在中与半透明效果相关的属性有两个和。属性的值规定透明度。以及更早的版本支持替代的属性。接下来通过场景来描述半透明效果的实现。图片出现半透明效果，如果将文字设置为白色，文字的半透明效果会很小。 在CSS中与半透明效果相关的属性有两个：opacity和rgba。opacity属性的值规定透明度。从 0.0 （完全透明）到 1.0（完全不透明）。设置opacity元素的所有后代元素会随着一起...
摘要：深入浅出某区域内有个浮层提示或者下拉菜单，于是可能需要遮住该区域之下的区域。很明显，这是完全吻合标准对此的定义。需要注意的是，此时就算元素变成了定位元素，也不能改变其会创建新局部层叠上下文的命运，因为他设置了。 z-index的重要性 在我看来，z-index 给了我们日常工作中以极大的帮助，我们用它来定义元素的层叠级别（stack level）。受益于它，你能做Popup, Dro...
摘要：元素层叠顺序补充说明位于最下面的特指层叠上下文元素后面会详解的边框和背景色。界中可能有其他的层叠结界，而自身也可能处于其他层叠结界中。 上一篇：《CSS世界》笔记四：流的保护与破坏 写在前面 《CSS世界》这本书还剩六章，但是这本书的精华部分主要是前面的内容，这里仅把后面章节相对重要的内容以博客展示，想着了解更多的小伙伴还是去阅读原文的好，毕竟三百多页的一本书并不是小小几篇博客能完全说...
摘要：但该盒不建立新的层叠上下文，除非是根元素。以上是基于的层叠上下文介绍。同级情况下，按照二者在源代码中的顺序，居后的又重新占领高地了。现在我们看以下源代码这个时候，以视口为包含块进行定位和大小计算，将会铺满整个屏幕。 前言：关于层叠上下文，笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理（表打我，等我校招拿到 offer 了我就读好伐 T_T）。一直听说 CSS3 里的层叠上下文...
摘要：后来居上当元素的层叠水平一致层叠顺序相同的时候，在流中处于后面的元素会覆盖前面的元素。相关连接深入理解中的层叠上下文和层叠顺序层叠顺序探究分层的显示 什么是层叠上下文（stacking context） 可以理解为一个dom节点在Z轴高人一等，特性类似于BFC，即层叠上下文的内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。 CSS2创建层叠上下文的两种方法（参考MDN） 根元...
阅读 1540·2023-04-26 02:43
阅读 2818·2021-11-11 16:54
阅读 1323·2021-09-23 11:54
阅读 1108·2021-09-23 11:22
阅读 2294·2021-08-23 09:45
阅读 829·2019-08-30 15:54
阅读 3074·2019-08-30 15:53
阅读 3157·2019-08-30 15:53
