如何在不修改父div样式、不干扰其他div的前提下实现子div层叠效果

核心逻辑 #

因为你的.parent和.child是平级节点，要让.child层叠在.parent上方且不修改.parent样式，只需要调整外层容器和.child的CSS即可：

• 给外层.container设置position: relative，作为.child绝对定位的参照容器，该属性不会改变容器原有布局
• 给.child设置绝对定位+偏移规则，同时配置足够高的层叠优先级

完整代码示例 #

HTML结构（和你现有结构完全一致，无需修改） #

<div class="container">
  <div class="parent"></div>
  <div class="child"></div>
</div>

CSS规则 #

/* 容器样式仅需新增relative定位，原有其他样式保持不变 */
.container {
  position: relative;
}

/* .parent的所有原有样式保持不变，不需要做任何修改 */
.parent {
  /* 你原来的parent样式保留即可 */
}

/* 仅需新增/调整child的如下样式 */
.child {
  position: absolute;
  /* 按需调整偏移位置，以下示例为和parent左上角对齐 */
  top: 0;
  left: 0;
  /* 按需设置child的宽高 */
  width: 80px;
  height: 80px;
  /* z-index数值只要大于.parent的z-index即可，保证在上方显示 */
  z-index: 10;
}

补充说明 #

如果你的.container已经设置了非static的定位属性（包括relative/absolute/fixed/sticky），则不需要额外修改.container的样式，直接给.child添加上述定位和z-index规则即可实现层叠效果。

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