解决 fixed 定位， 修改 z-index 属性无效问题

主要原因: 观察z-index 文档由于定位盒子受层叠上下文 - CSS：层叠样式表 | MDN (mozilla.org)影响。

解决方法:

定位问题代码位置

HTML 结构大概如下

html

• header
  • nav
• section
  • div:relative(覆盖元素)

发现问题因为 nav 节点的层叠上下文等级不仅看 z-index 还需要根据 父级元素 header 和 section。 当section 层级比 header 大时，无论怎么修改都会产生覆盖问题。

解决方案

1. 由于 nav 本意是让他全局置顶固定，因此可以将 header 父级元素设置为 z-index: 999. 从顶层节点的层叠上下文改变他的子元素的高度。
2. 当然你也可以分配合适的层叠上下文，给出适合的z-index。这取决于你是否想要，让哪个元素居于上层。

总结

1. 关键: 同一个层叠上下文下: z-index 决定层级。而z-index无效可能叠层上下文，该上下文不再同级
2. z-index 无效， 观察层叠上下文结构