z-index与层叠上下文

小白白中之白

已于 2022-12-10 06:37:07 修改

阅读量205

点赞数

分类专栏：网页笔记文章标签： css html css3

于 2021-04-25 22:40:28 首次发布

原文链接：https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/#comments

版权

网页笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

相关链接:
z-index和层叠上下文
 深入理解CSS中的层叠上下文和层叠顺序
 https://juejin.cn/post/6951640002526707743.
https://www.imooc.com/video/11628
https://juejin.cn/post/6911952124804857863
https://www.infoq.cn/article/2kadW8xf15W5X5XsguHM 在这里插入图片描述

正文

概念理解：
层叠上下文：官
其他元素：平民
层叠水平：级别
层叠顺序：规则

我们的探讨仅仅局限在当前层叠上下文元素中。为什么呢？因为没有意义。普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。

创建层叠上下文

1. 页面根元素（html）天生具有层叠上下文，称之为“根层叠上下文”。
2. z-index值为数值的定位元素的传统层叠上下文（一般z-index用于定位元素）。
3. 其他CSS3属性。

解释：
1：指的是页面根元素，也就是滚动条的默认的始作俑者元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因
2：对于包含有position的定位元素，当其z-index值不是auto的时候并且position部位sticky，会创建层叠上下文。

3：
3.1:z-index值不为auto的flex项(父元素display:flex|inline-flex).
3.2:元素的opacity值不是1.
3.3:元素的transform值不是none.
3.4:元素的filter值不是none.
(选了几个较为常见的)

附上对3的解释：
3.1：父级需要是display:flex或者display:inline-flex水平，子元素的z-index不是auto，必须是数值。此时，这个子元素为层叠上下文元素，没错，注意了，是子元素，不是flex父级元素。
3.2：无需解释
3.3：无需解释
3.4：无需解释

层叠上下文元素有如下特性：

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

翻译成真实世界语言就是：

当官的比老百姓更有机会面见圣上；
领导下去考察，会被当地官员阻隔只看到繁荣看不到真实民情；
一个家里，爸爸可以当官，孩子也是可以同时当官的。但是，孩子这个官要受爸爸控制。
自己当官，兄弟不占光。有什么福利或者变故只会影响自己的孩子们。
每个当官的都有属于自己的小团体，当家眷管家发生摩擦磕碰的时候（包括和其他官员的家眷管家），都是要优先看当官的也就是主子的脸色。

层叠规则

一：
所有元素
请添加图片描述
(1) 背景和边框：建立层叠上下文的元素的背景和边框，层叠中的最低级别
(2) 负的z-index：z-index 为负值时形成的层叠上下文
(3) 块级盒子：文档流中正常的块级元素(不一定为层叠上下文)
(4) 浮动盒子：非定位的浮动盒子(不一定为层叠上下文)
(5) 行内盒：文档流内的行内级盒子(不一定为层叠上下文)
(6) z-index：0 定位元素，这些元素建立了新的层叠上下文；。
(7) 正的z-index：层叠中的最高级别。