[分享]css两个圆底部重叠

CSS中，如何实现两个圆底部重叠呢？我们可以使用CSS的position属性来实现。

.circle1 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50%;
}

.circle2 {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  background-color: blue;
  border-radius: 50%;
} 

首先，我们创建了两个圆形元素.circle1和.circle2，它们分别设置了红色和蓝色的背景色以及50%的圆角半径。

接着，我们给.circle1和.circle2设置了position: absolute属性，让它们可以根据其父元素进行定位。

对于.circle1，我们将其bottom属性设置为0，left属性设置为50%（即水平居中），并使用transform属性中的translateX(-50%)将其向左偏移了50%的宽度（即将其置于圆形中心位置）。

对于.circle2，我们将其bottom属性设置为-50px（即往下偏移了50px），left属性设置为50%（即水平居中），并使用transform属性中的translateX(-50%)将其向左偏移了50%的宽度（即将其置于圆形中心位置）。

这样，我们就创建了两个底部重叠的圆形元素，并且它们可以根据页面进行自适应的定位。