使用CSS绘制重叠椭圆：重叠区域问题求助

嘿，我来帮你搞定这个椭圆重叠的问题！你当前用margin-left: -30px来实现重叠的思路是对的，但大概率遇到的是后面的椭圆覆盖前面的元素/文本，或者重叠区域的边框、内容显示异常的情况，我给你几个实用的解决方案：

1. 核心修复：控制层级+添加背景 #

首先，给每个椭圆加上相对定位和背景色，再通过z-index控制显示层级，这样前面的椭圆能保持在上方，不会被后面的覆盖：

.oval {
  width: 100px;
  display: inline-block;
  height: 50px;
  border: 1px solid red;
  border-radius: 100px / 50px;
  margin-left: -30px;
  /* 新增以下属性 */
  position: relative; /* 让z-index生效的前提 */
  z-index: 1; /* 默认层级 */
  background: #fff; /* 避免后面的内容透过来 */
  text-align: center;
  line-height: 50px; /* 让文本垂直居中更美观 */
}

然后在HTML里给靠前的椭圆设置更高的z-index，保证它们始终在上方：

<div class="oval" style="z-index: 3">aaa</div>
<div class="oval" style="z-index: 2">bbb</div>
<div class="oval" style="z-index: 1">ccc</div>

2. 优化布局：避免容器截断 #

如果第一个椭圆的左侧被外层容器截断，可以给容器加个左外边距，留出足够空间：

.oval-wrapper {
  margin-left: 30px; /* 刚好抵消第一个椭圆的负边距影响 */
}

对应的HTML结构：

<div class="oval-wrapper">
  <div class="oval" style="z-index: 3">aaa</div>
  <div class="oval" style="z-index: 2">bbb</div>
  <div class="oval" style="z-index: 1">ccc</div>
</div>

3. 进阶：文本不被遮挡的小技巧 #

如果椭圆内的文本被后面的边框遮挡，可以把文本放在单独的容器里，给它设置更高的层级：

.oval span {
  position: relative;
  z-index: 10; /* 让文本层级高于椭圆边框 */
}

HTML修改为：

<div class="oval" style="z-index: 3"><span>aaa</span></div>
<div class="oval" style="z-index: 2"><span>bbb</span></div>

这样就能完美实现类似示例图的重叠椭圆效果啦！

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