为何Flexbox导航下拉时Grid元素six会穿透显示？

核心逻辑：层叠上下文与Grid子元素的特殊z-index规则 #

• 默认层叠顺序规则
  所有未创建独立层叠上下文的元素，都处于根层叠上下文（由<html>标签创建）中。在这个上下文里，元素的堆叠优先级遵循：

  非定位元素/定位元素（z-index:auto）的优先级由DOM顺序决定——后面的元素会覆盖前面的元素。
  如果你的six元素在DOM结构中排在导航下拉菜单之后，窄屏布局切换后，它自然会覆盖下拉菜单，出现穿透现象。

• Grid子元素的z-index特殊行为
  CSS规范对Grid容器的子元素有特殊规定：哪怕子元素是默认的static定位，只要设置了z-index属性（无论值是正、负还是0），就会创建独立的层叠上下文，并且其堆叠优先级由z-index值直接决定。
  当你给six设置负z-index后，它的层叠上下文优先级会低于根上下文里所有非负z-index的元素（包括你的导航下拉菜单），因此会被下拉菜单覆盖，穿透问题解决。

补充验证点 #

如果你的导航下拉菜单是absolute/relative这类定位元素，原本优先级应该高于非定位的six，但如果six在DOM中更靠后，且导航容器没有创建独立层叠上下文，six依然能覆盖它——这时候给six加负z-index触发层叠上下文，就能把它压到下拉菜单下方。

内容的提问来源于stack exchange，提问作者Marina Dunst