docs: position为fixed时设置z-index失效

[mizi-lin]

多个fixed 工作时，部分zIndex 不生效

在嵌套层级越深，现象越是明显

原因分析

其父元素设置了zIndex, 谷歌浏览器在设置position:fixed;后会触发元素创建一个新的层叠上下文，并且当成一个整体在父层叠上下文中进行比较。如上面的dom结构，当给b设置了position:fixed属性后，会触发创建一个新的层叠上下文，它的父层叠上下文变成了a，所以b只能在a的内部进行层叠比较。这也就是大家熟听的“从父原则”

什么是从父原则:

子元素在与父辈元素比较的时候，用父辈的 z-index 去比较 在与同级元素比较的时候，才有自己的 z-index 去比较

解决方案

• 去除父元素的zIndex设置, 或修改为 z-index: auto | unset
• 将元素放置到根节点下
• 上面两种方案都不够优雅，会破坏代码逻辑，所以需要配合JS, 在fixed元素工作时，向上查找元素，去除zIndex配置

[mizi-lin]

文档中的层叠 stacking context 会导致 position: fixed 失效，或者出现一些异常表现。（不同的浏览器内核有不同的表现）

文档中的层叠上下文由满足以下任意一个条件的元素形成：

根元素 (HTML), z-index 值不为 "auto"的 绝对/相对定位， 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex， opacity 属性值小于 1 的元素（参考 the specification for opacity）， transform 属性值不为 "none"的元素， mix-blend-mode 属性值不为 "normal"的元素， filter值不为“none”的元素， perspective值不为“none”的元素， isolation 属性被设置为 "isolate"的元素， position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章） -webkit-overflow-scrolling 属性被设置 "touch"的元素

[mizi-lin]

文档中的层叠 stacking context 会导致 position: fixed 失效，或者出现一些异常表现。（不同的浏览器内核有不同的表现）

文档中的层叠上下文由满足以下任意一个条件的元素形成：

根元素 (HTML), z-index 值不为 "auto"的 绝对/相对定位， 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex， opacity 属性值小于 1 的元素（参考 the specification for opacity）， transform 属性值不为 "none"的元素， mix-blend-mode 属性值不为 "normal"的元素， filter值不为“none”的元素， perspective值不为“none”的元素， isolation 属性被设置为 "isolate"的元素， position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章） -webkit-overflow-scrolling 属性被设置 "touch"的元素

https://zhuanlan.zhihu.com/p/115552334

https://www.jb51.net/css/837737.html