负margin下块元素重叠时z-index无效的原因及非定位调整方法

为什么z-index在此场景无效？ #

z-index 属性仅对创建了堆叠上下文的元素生效。默认状态下，块级元素的定位为static（静态定位），不会触发堆叠上下文。只有当元素设置了position: relative/absolute/fixed/sticky，或是使用transform、filter等能生成堆叠上下文的属性时，z-index才会发挥作用。你当前的两个div都是静态定位，所以无论设置多大的z-index值，都不会改变它们的堆叠顺序，依然遵循「DOM中后出现的元素堆叠层级更高」的默认规则。

不使用定位和z-index调整重叠顺序的方法 #

以下是几种可行的方案：

1. 调换DOM元素顺序 #

直接交换两个div的位置，再给原本的「upper」元素设置负margin-bottom，让它向上移动覆盖另一个元素：

<body>
  <div class="downer"></div>
  <div class="upper"></div>
</body>

.upper {
  background-color: yellow;
  height: 200px;
  width: 200px;
  margin-bottom: -100px;
}
.downer {
  height: 200px;
  width: 300px;
  background-color: green;
}

DOM中后出现的元素默认堆叠层级更高，调换后黄色div会覆盖绿色div。

2. 用Flex布局反转渲染顺序 #

给父元素（比如body）设置Flex布局并反转列方向，让元素渲染顺序与DOM顺序相反，再保留原有的负margin实现重叠：

body {
  display: flex;
  flex-direction: column-reverse;
  margin: 0; /* 清除默认边距避免布局偏移 */
}
.upper {
  background-color: yellow;
  height: 200px;
  width: 200px;
}
.downer {
  margin-top: -100px;
  height: 200px;
  width: 300px;
  background-color: green;
}

此时原本DOM中靠前的upper会在渲染时排在后面，堆叠层级更高，从而覆盖downer。

3. 用Grid布局调整渲染顺序 #

给父元素设置Grid布局，通过order属性调整元素的渲染顺序，后渲染的元素堆叠层级更高：

body {
  display: grid;
  margin: 0;
}
.upper {
  background-color: yellow;
  height: 200px;
  width: 200px;
  order: 2; /* 数值越大，渲染顺序越靠后 */
}
.downer {
  margin-top: -100px;
  height: 200px;
  width: 300px;
  background-color: green;
  order: 1;
}

设置order后，upper会在downer之后渲染，自然就能覆盖对方。

内容的提问来源于stack exchange，提问作者David Mason