圆圈覆盖在内容下方并相互叠加

以下是一个使用HTML和CSS实现圆圈覆盖在内容下方并相互叠加的示例代码：

HTML代码：

<div class="container">
  <div class="circle"></div>
  <div class="content">
    <h1>内容标题</h1>
    <p>这是内容的描述。</p>
  </div>
</div>

CSS代码：

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
}

.content {
  position: relative;
  z-index: 1;
  padding: 10px;
  color: white;
}

这段代码中，我们使用了position: relative属性将容器设定为相对定位。然后，我们使用了position: absolute属性将圆圈设定为绝对定位，并通过top和left属性将其放置在容器的左上角。圆圈的大小通过width和height属性进行调整，背景色通过background-color属性进行设置，而border-radius: 50%则将圆圈的边框设置为圆形。

接下来，我们将内容块设定为相对定位，并使用z-index: 1属性将其放置在圆圈之上。padding属性用于设置内容块的内边距，而color属性用于设置文字颜色。

最终的效果是，圆圈将覆盖在内容下方，并相互叠加，而内容块则位于圆圈之上。