两个重叠Div的CSS DropShadow问题及布局对齐求助

解决方案思路 #

• 合并阴影层级：把两个元素放进同一个父容器，给父容器添加阴影效果，这样两个元素的阴影会合并成一个整体，不会互相重叠。
• 绝对定位精准对齐：父容器设为相对定位，子元素用绝对定位绑定右上角，无需手动偏移就能完美对齐，且不受主容器动态宽高影响。

完整代码实现 #

<div class="shape-wrapper">
  <div class="main-shape">动态内容区域</div>
  <div class="sub-shape">右上角标记</div>
</div>

.shape-wrapper {
  position: relative;
  display: inline-block; /* 自动适配main-shape的动态宽高 */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); /* 统一添加阴影 */
}

.main-shape {
  background: #ffffff;
  padding: 1.5rem;
  box-sizing: border-box;
  /* 宽高可动态修改，无需调整其他样式 */
  width: 250px;
  height: 180px;
}

.sub-shape {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  background: #ff5252;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

关键细节说明 #

1. 阴影处理：使用父容器的filter: drop-shadow()替代两个元素各自的box-shadow，阴影会跟随容器内的整体轮廓渲染，彻底解决阴影重叠问题。如果习惯用box-shadow，给父容器添加也能达到同样效果。
2. 动态适配：父容器的inline-block会自动包裹main-shape的尺寸，无论main-shape的宽高怎么变，sub-shape的top:0; right:0都会牢牢贴在右上角，不需要手动调整偏移值。

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