如何定位子元素使其一半高度与父元素的下一个兄弟元素重叠

方案一：负外边距（Negative Margin） #

直接给引用框设置负的顶部外边距，把它往上拉到和上方区块重叠的位置，同时不会留下多余空白，父容器高度会自动适配内容，完全不需要JS：

.quote-box {
  position: relative;
  margin-top: -150px; /* 根据实际需要的重叠高度调整数值 */
  z-index: 1; /* 确保引用框显示在上方区块之上 */
}

注意：如果上方区块有背景色，记得给它设置合适的padding-bottom，避免内容被引用框遮挡。

方案二：CSS Grid布局（更优雅） #

把包含两个区块的父容器设为Grid布局，让两个区块共享同一单元格，实现自然重叠，Grid会自动以最高元素的高度作为容器高度，彻底摆脱JS依赖：

.parent-container {
  display: grid;
}
.wheelhouse-section, .quote-box {
  grid-row: 1;
  grid-column: 1;
}
.quote-box {
  align-self: end; /* 控制引用框垂直位置，实现半重叠效果 */
  z-index: 1;
}

这种方式不需要计算具体的偏移数值，布局更灵活，响应式场景下也更好适配。

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