CSS如何不依赖固定px实现盒子半叠居中于另一盒子上方

完全不需要依赖固定px高度即可实现你要的效果，核心仅需1行CSS属性，适配任意尺寸的盒子。

实现逻辑 #

你现有的定位基础是对的：绿色父盒设置position: relative作为定位上下文，白色子盒设置position: absolute + top: 0，此时白盒上边缘和绿盒上边缘刚好对齐。
要实现一半覆盖在绿盒上方、另一半露出在绿盒外侧的效果，只需要让白盒整体向上偏移自身高度的50%即可，这个偏移用CSS transform实现天然支持自适应，不需要提前知道盒子高度。

完整代码示例 #

HTML结构 #

<div class="green-box">
  <div class="white-box">任意内容都可以，高度会自适应</div>
</div>

CSS样式 #

.green-box {
  position: relative;
  background-color: #22c55e; /* 绿色 */
  /* 宽高无要求，可以写固定值，也可以完全由内容撑开 */
  width: 300px;
  padding: 40px 20px;
  margin-top: 100px; /* 仅为页面展示时给顶部露出的白盒预留空间，实际项目可去掉 */
}

.white-box {
  position: absolute;
  top: 0;
  /* 核心实现属性：向上偏移自身高度的一半 */
  transform: translateY(-50%);
  background-color: #ffffff; /* 白色 */
  padding: 16px 24px;
  /* 如果需要同时实现水平居中，再加下面两行即可 */
  left: 50%;
  transform: translate(-50%, -50%);
}

方案优势 #

• 无硬编码依赖：偏移值基于白盒自身高度计算，不管绿盒、白盒高度怎么变化，半覆盖效果始终精准
• 兼容性强：全量支持现代浏览器，不需要额外兼容写法
• 性能优异：transform属性仅触发合成层渲染，不会导致页面重排，运行性能更好

注意：如果你的项目需要兼容IE8及以下的老旧浏览器，这个方案不适用，目前绝大多数业务场景都可以放心使用。

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