我的问题

问题一

最近项目中出现这样一个问题：我定位设置为 fiexd 的元素，在展示的时候，居然被定位为 absolute 的元素所遮挡。
原谅我只粗略的阅读过 css ，基本只有个大致的概念，当时我的心里就出现这几个想法：

• 应该是 z-index 导致的层叠上下文引起的吧
• 定位为 fiexd，应该只受到屏幕所约束的吧，怎么会被遮挡呢（其实我只认为只有 absolute 定位可以重叠遮挡）

问题二

想要重构项目的时候，我在想，z-index 值的不同，会导致值比较低的元素（也就是在屏幕底层的元素），能够被点击到吗？（也就是触发事件）
当时的我认为，z-index 相当于根据屏幕的远近，对元素进行划分，比较远的应该不能被点击到。

解决

问题一解决

设元素定位为 absolute 或者 fiexd 的元素为 child ，设离其最近的定位不为 static 的祖先元素为 ancestors(有可能不存在，那么该元素可以认为是 body 或者 html ):

• child定位为 absolute，参照ancestors进行定位。
• child定位为 fiexd，不受ancestors位置影响，但是会受到其层叠上下文的控制。
• 多个兄弟元素child，即同一个层叠上下文的，后出现的能够覆盖前面的，即定位 absolute 的能够覆盖住 fiexd。

问题二解决

能够被点击到。
即使其不在同一个 z-index 上，是逻辑意义上的在屏幕底层，只要没有被值大的 z-index 的元素所遮挡，那么就能被触发事件。