我的问题
问题一
最近项目中出现这样一个问题：我定位设置为 fiexd 的元素，在展示的时候，居然被定位为 absolute 的元素所遮挡。
原谅我只粗略的阅读过 css ，基本只有个大致的概念，当时我的心里就出现这几个想法：
- 应该是 z-index 导致的层叠上下文引起的吧
- 定位为 fiexd，应该只受到屏幕所约束的吧，怎么会被遮挡呢（其实我只认为只有 absolute 定位可以重叠遮挡）
问题二
想要重构项目的时候，我在想，z-index 值的不同，会导致值比较低的元素（也就是在屏幕底层的元素），能够被点击到吗？（也就是触发事件）
当时的我认为，z-index 相当于根据屏幕的远近，对元素进行划分，比较远的应该不能被点击到。
解决
问题一解决
设元素定位为 absolute 或者 fiexd 的元素为 child ，设离其最近的定位不为 static 的祖先元素为 ancestors(有可能不存在，那么该元素可以认为是 body 或者 html ):
child定位为 absolute，参照ancestors进行定位。child定位为 fiexd，不受ancestors位置影响，只会根据窗口定位，但是会受到其形成的层叠上下文的影响。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由窗口改为该祖先。- 多个兄弟元素
child，即同一个层叠上下文的，后出现的能够覆盖前面的，即定位 absolute 的能够覆盖住 fiexd。absolute 和 fiexd 堆叠规则是一样的！
问题二解决
能够被点击到。
我理解错了，z-index 只是影响堆叠规则而已。即使其不在同一个 z-index 上，是逻辑意义上的在屏幕底层，只要没有被值大的 z-index 的元素所遮挡，那么就能被触发事件。