如何在不拆分父子元素的前提下让无关元素显示于两者之间？

问题背景 #

有一个包含子元素的父元素，受代码限制无法拆分DOM结构。需要实现：子元素显示在某无关元素上方，父元素显示在该无关元素下方，但当前代码中无关元素始终覆盖父子元素。

原问题代码 #

CSS #

.parent {
  position: relative;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  z-index: 1;
}

.child {
  background-color: #f00;
  height: 50px;
  width: 50px;
  z-index: 3;
}

.unrelated {
  position: absolute;
  top: 25px;
  left: 25px;
  background-color: #00f;
  height: 25px;
  width: 50px;
  z-index: 2;
}

HTML #

<div class="parent">
  <div class="child">
    Child element
  </div>
</div>

<div class="unrelated">
  Unrelated element
</div>

问题根源 #

父元素设置了position: relative和z-index: 1，这会创建一个独立的堆叠上下文。子元素的z-index仅在父元素的堆叠上下文内部生效，无法突破父元素的层级。而无关元素的z-index: 2高于父元素的z-index: 1，因此整个父元素（包括子元素）都会被无关元素覆盖。

可行解决方案 #

方案1：移除父元素的z-index（推荐） #

父元素保留position: relative但不设置z-index（或设为默认的auto），这样父元素不会创建独立堆叠上下文。子元素设置定位属性后，其z-index可直接与无关元素的层级比较：

.parent {
  position: relative;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  /* 移除z-index，避免创建堆叠上下文 */
}

.child {
  position: relative; /* 必须设置定位，z-index才会生效 */
  background-color: #f00;
  height: 50px;
  width: 50px;
  z-index: 3; /* 此时层级高于无关元素的z-index:2 */
}

.unrelated {
  position: absolute;
  top: 25px;
  left: 25px;
  background-color: #00f;
  height: 25px;
  width: 50px;
  z-index: 2;
}

此方案下，父元素因无独立堆叠上下文，层级低于无关元素；子元素的z-index直接作用于根堆叠上下文，层级高于无关元素，完美符合需求。

方案2：父元素必须保留z-index时的替代方案 #

如果父元素因其他逻辑必须保留z-index，可以通过给子元素设置position: fixed（需调整位置匹配父元素），让子元素脱离父元素的堆叠上下文：

.parent {
  position: relative;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  z-index: 1; /* 保留父元素的z-index */
}

.child {
  position: fixed;
  background-color: #f00;
  height: 50px;
  width: 50px;
  z-index: 3; /* 基于根堆叠上下文，层级高于无关元素 */
  /* 手动匹配父元素内的位置 */
  top: 0;
  left: 0;
}

.unrelated {
  position: absolute;
  top: 25px;
  left: 25px;
  background-color: #00f;
  height: 25px;
  width: 50px;
  z-index: 2;
}

注意：position: fixed基于视口定位，若父元素位置变化，需额外通过JS调整子元素位置，仅在父元素位置固定时适用。

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