如何用CSS让子div绘制在父div下方？仅用两个div实现

现有如下JSX结构：

<>
  <div className="outer-div">
   <div className="inner-div">
   </div>
  </div>
</>

对应CSS样式：

.outer-div {
  height: 500px;
  width: 300px;
  background-color: red;
  margin-left: 100px;
}

.inner-div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: white;
  position: relative;
  height: 60px;
  top: -25px;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  border-radius: 16px 16px 0 0;
  background-color: blue;
}

当前子div（.inner-div）覆盖在父div（.outer-div）上方，希望仅用这两个div实现子div绘制在父div下方，通过重叠呈现父div底部的圆角效果。尝试调整position和z-index均未成功，询问是否可行及实现方法。

可行，核心是利用层叠上下文规则调整子元素层级位置，具体修改如下：

.outer-div {
  height: 500px;
  width: 300px;
  background-color: red;
  margin-left: 100px;
  position: relative; /* 设置相对定位，让子元素绝对定位以此为参照 */
  /* 不设置z-index，保持默认auto，避免创建独立层叠上下文 */
}

.inner-div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: white;
  position: absolute; /* 改为绝对定位，脱离父元素文档流 */
  height: 60px;
  top: calc(100% - 25px); /* 让子元素顶部与父元素底部重叠25px，和原效果重叠量一致 */
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  border-radius: 16px 16px 0 0;
  background-color: blue;
  z-index: -1; /* 将子元素层级设为负，使其位于父元素下方 */
}

1. 父元素设置position: relative但不指定z-index，既可以让子元素的绝对定位以它为参照，又不会创建独立的层叠上下文，子元素的z-index会相对于根层叠上下文生效。
2. 子元素改为position: absolute，通过top: calc(100% - 25px)调整位置，实现与父元素底部重叠25px的效果。
3. 子元素设置z-index: -1，在根层叠上下文里的层级低于父元素，因此会被父元素遮挡上半部分，仅露出顶部的圆角区域，形成父元素底部带圆角的视觉效果。

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