可以使用mix-blend-mode：

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}
.absolute-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  mix-blend-mode: overlay;
}

个字符
或3D变换：（图片来源：How to get a child element to show behind (lower z-index) than its parent?）

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  transform-style: preserve-3d;
}
.absolute-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  transform: translateZ(-10px);
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="relative-container">
  <div class="absolute-element"></div>
</div>

的字符串
如果您在父节点中创建堆栈上下文，其他提供的解决方案将不起作用（请参见CSS negative z-index: what does it mean?）：

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 0; /* creates a stacking context, (or any other stacking context creating property https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context )*/
  
}
.absolute-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: -1;
}

<div class="relative-container">
  <div class="absolute-element">hello</div>
</div>

的字符串

只需从 relative 容器中删除z-index声明，并将一个负的z-index放入 absolute 容器。

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}
.absolute-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  z-index: -1;
  width: 100px;
  height: 100px;
  background-color: blue;
}

个字符

例如，你可以像z-index一样把absolute-element放在相对div后面，但是相对div本身不能有z-index，否则它将成为绝对div的z-index祖先，不能再放在后面

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}
.absolute-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: -1;
}

个字符
如果你需要红色的div有z-index，那么你可以root到另一个（可能是不可见的）父div，并将它们都设置为absolute。

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
}
.red-element{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 2;
}
.blue-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 1;
}

<div class="relative-container">
  <div class="red-element"></div>
  <div class="blue-element"></div>
</div>

的字符串

.relative-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  z-index: 2;
}
.absolute-element {
  position: absolute;
  bottom: -10px;
  right: -10px;
  z-index: 1;
  width: 100px;
  height: 100px;
  background-color: blue;
  clip-path:polygon(90px 0 , 100px 0, 100px 100px , 0 100px , 0 90px, 90px 90px);
}

个字符