关于z-index层级疑问：为何z-index 3显示在2之上？

首先纠正一个基础误解：z-index 的数值越大，元素的堆叠层级越高，会显示在更上层，而不是数值小的在顶层——你之前的理解刚好搞反了，所以图中 z-index:3 的元素在 z-index:2 的元素之上，本身是符合基础规则的。

再来说 position 属性对 z-index 的影响，核心是「堆叠上下文」这个概念：

• z-index 只对非 static 定位的元素生效（也就是 position 为 relative、absolute、fixed、sticky 的元素）。如果元素是默认的 static 定位，设置 z-index 不会产生任何效果，它会按照文档流的顺序堆叠。
• 当元素设置了非 static 的 position，且 z-index 值不为 auto 时，会创建一个独立的堆叠上下文。在这个上下文内部，元素的层级只在内部生效，不会干扰外部元素；同时外部元素也无法穿透这个上下文覆盖内部元素。

回到你遇到的情况：Div3 是 absolute 定位（非 static），z-index:3 有效，它会按照数值层级显示；而如果 Div2 是默认的 static 定位，那它的 z-index:2 是无效的，自然会被有有效 z-index 的 Div3 覆盖。

内容的提问来源于stack exchange，提问作者HyungJun Cho