如何用纯CSS实现高度未知div精准半重叠在已知尺寸div上

完全可以仅靠纯CSS实现，不需要写JS计算绿色div的动态高度，和你之前的固定高度方案完全兼容，迁移成本极低。

核心实现逻辑 #

你之前用top: -45px的本质，是把绿色div向上偏移自身高度的一半，让一半区域叠在红色div之上、另一半垂露在外侧。
CSS里的transform属性支持基于元素自身尺寸的百分比值计算偏移量，不需要提前知道绿色div的实际高度，就能自动完成“向上移动自身高度50%”的效果。

注意：相对定位的top/left属性的百分比是参考父元素尺寸计算的，而非元素自身尺寸，直接写top: -50%无法实现需求，这是常见的踩坑点。

具体代码实现 #

DOM结构完全不需要调整，和你之前的写法保持一致即可：

<!-- 固定宽高的红色矩形 -->
<div class="red-box"></div>
<!-- 动态高度的绿色矩形，高度随内部内容自动撑开 -->
<div class="green-box">
  任意动态生成的内部内容，无固定高度
</div>

对应CSS代码：

/* 红色矩形：原有固定宽高的样式完全保留，不做修改 */
.red-box {
  width: 300px; /* 替换为你实际的固定宽度值 */
  height: 200px; /* 替换为你实际的固定高度值 */
  background: #ef5350;
}

/* 绿色矩形：只需要替换原来的重叠逻辑代码 */
.green-box {
  background: #66bb6a;
  /* 宽度、内边距等原有样式正常保留，不需要提前写死固定高度 */
  position: relative;
  /* 核心替换：把之前的 `top: -45px` 换成这行
     如果遇到文字渲染模糊的问题，可以替换为 transform: translateY(-50%) translateZ(0);
  */
  transform: translateY(-50%);
  /* 如果需要绿色矩形视觉上盖在红色矩形上方，补这行即可 */
  z-index: 1;
}

效果与兼容性说明 #

• 无论绿色div实际高度是90px、150px还是其他任意值，偏移量都会自动按照自身高度的一半计算，永远保持“半叠半露”的视觉效果
• 元素的文档流占位和之前使用top负值的行为完全一致，不会造成后续布局塌陷
• 该方案的浏览器兼容性极强，从IE9开始全量支持，不需要做额外降级处理

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