带圆角元素叠加实现问题：如何让HTML页面中两个div块上下重叠

API 探路者

2026-10-6

实现下方块重叠在上方块之上的两种常用方案

方法1：负margin实现（推荐，兼容性最好）

这是最简便的实现方式，不需要修改父容器属性，利用块级元素默认的文档流层级（后渲染的元素层级高于先渲染的元素），直接给下方块添加负的上外边距即可实现重叠效果。

代码示例

<!-- HTML结构 -->
<div class="top-block"></div>
<div class="bottom-block"></div>

/* CSS样式 */
.top-block {
  height: 200px;
  background-color: #2563eb;
  border-radius: 0 0 18px 18px; /* 可根据需求调整圆角数值 */
}
.bottom-block {
  height: 400px;
  background-color: #ffffff;
  border-radius: 18px 18px 0 0;
  margin-top: -24px; /* 调整负值大小即可控制重叠的高度 */
}

方法2：相对定位实现（适合需要手动控制层级的场景）

如果页面存在其他定位元素，需要明确控制重叠层级，可以使用相对定位配合z-index实现：

代码示例

/* 仅列出和方法1不同的bottom-block样式，其余代码和方法1一致 */
.bottom-block {
  height: 400px;
  background-color: #ffffff;
  border-radius: 18px 18px 0 0;
  position: relative;
  top: -24px; /* 向上偏移数值对应重叠高度 */
  z-index: 9; /* 可根据页面其他元素的层级调整数值，避免被遮挡 */
}