在理解层叠上下文之前,我们先谈一谈CSS的z-index属性。
通常情况下,HTML页面可以被认为是二维的,因为文本,图像和其他元素被排列在页面上而不重叠。
然而其实CSS 允许你在现有的渲染引擎上层叠的摆放盒模型元素。 所有的层都可以用一个整数( z 轴顺序)来表明当前层在 z 轴的位置。 数字越大, 元素越接近观察者。Z 轴顺序用 CSS 的 z-index
属性来指定。
不含z-index的堆叠:
当没有元素包含z-index属性时,元素按照如下顺序堆叠(从底到顶顺序):
- 根元素的背景和边界
- 普通流(无定位)里的块元素(没有position或者position:static;)按HTML中的出现顺序堆叠
- 定位元素按HTML中的出现顺序堆叠
![346192fd4171e32dab7b6c19f782739f.png](https://i-blog.csdnimg.cn/blog_migrate/71e1f134b48e1467c54a9f24ee230696.png)
示例链接
层叠与浮动
对于浮动的块元素来说,层叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间:
- 根元素的背景与边框
- 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
- 浮动块元素
- 后代中的定位元素按照它们在 HTML 中出现的顺序层叠
![18ea3de7701628ffde7824bcef557e0f.png](https://i-blog.csdnimg.cn/blog_migrate/dd3c17a4c9404133943ab70567525da1.png)
示例链接
可以看到非定位块元素DIV#4的背景与边框丝毫不会受到浮动块元素DIV#2的影响,但内容却受到影响。
所以上面的层叠顺序我们可以改成:
1.根元素的背景与边框
2.位于普通流中的后代块元素按照它们在 HTML 中出现的顺序层叠
3.浮动块元素
4.常规流中的后代行内元素
5.后代中的定位元素按照它们在 HTML 中出现的顺序层叠
含z-index的堆叠:
我们可以把它理解成“层叠”, 每个层都有一个顺序数, 顺序数大的层在上面, 小的在下面。
z-index只对指定了position属性的元素有效。
- 底层: 距离观察者最远
- ...
- -3 层
- -2 层
- -1 层
- 0 层 默认层
- 1 层
- 2 层
- 3 层
- ...
- 顶部: 最接近观察者
当没有指定z-index的时候, 所有元素都在会被渲染在默认层(0层)
当多个元素的z-index属性相同的时候(在同一个层里面),那么将按照不含z-index的堆叠进行布局。
![b477fb38b95289acf7159f2eefd6f3df.png](https://i-blog.csdnimg.cn/blog_migrate/67d47abc772c63de8bb27ff48083b962.png)
什么是层叠上下文?
mdn中这样解释:
假定用户正面向(浏览器)视窗或网页,而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开, 层叠上下文就是对这些 HTML 元素的一个三维构想。
如何产生层叠上下文?
文档中的层叠上下文由满足以下任意一个条件的元素形成:
- 文档根元素(<html>);
- position 值为 absolute(绝对定位)或 relative(相对定位)且 z-index 值不为 auto 的元素;
- position 值为 fixed(固定定位)或 sticky(粘滞定位)的元素(沾滞定位适配所有移动设备上的浏览器,但老的桌面浏览器不支持);
- flex (flexbox) 容器的子元素,且 z-index 值不为 auto;
- grid (grid) 容器的子元素,且 z-index 值不为 auto;
- opacity 属性值小于 1 的元素(参见 the specification for opacity);
- mix-blend-mode 属性值不为 normal 的元素;
- 以下任意属性值不为 none 的元素:
- transform
- filter
- perspective
- clip-path
- mask / mask-image / mask-border
- isolation 属性值为 isolate 的元素;
- -webkit-overflow-scrolling 属性值为 touch 的元素;
- will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素(参考这篇文章);
- contain 属性值为 layout、paint 或包含它们其中之一的合成值(比如 contain: strict、contain: content)的元素。
总结
1.层叠上下文可以包含在其他层叠上下文中,并且一起创建一个层叠上下文的层级。
2.每个层叠上下文都完全独立于它的兄弟元素:当处理层叠时只考虑子元素。
3.每个层叠上下文都是自包含的:当一个元素的内容发生层叠后,该元素将被作为整体在父级层叠上下文中按顺序进行层叠。
![7b794c3241fa30f10265fc6d7f035d98.png](https://i-blog.csdnimg.cn/blog_migrate/6a892abe51906d70432ff03a84e25ea7.png)