Bootstrap 5中实现CSS叠加图形的问题求助

AI 小北

2026-6-24

解决Bootstrap 5中叠加椭圆不撑大容器的实现方案

核心思路

把椭圆元素设置为绝对定位脱离文档流，这样调整椭圆尺寸时不会影响父容器（col）的大小；同时给父容器设置position: relative作为定位参考，确保椭圆在指定区域内精准定位。

具体实现步骤

设置父容器定位参考
给包含椭圆的col容器添加相对定位，保留Bootstrap原生响应式布局，无需额外设置宽高：

.oval-container {
  position: relative;
}

对应HTML结构（嵌套在Bootstrap的row/col体系中）：

<div class="col-md-6 oval-container">
  <!-- 页面原有内容放在这里，不受椭圆元素影响 -->
  <div class="oval oval1"></div>
  <div class="oval oval2"></div>
  <div class="oval oval3"></div>
</div>

定义椭圆基础样式
用border-radius: 50%实现椭圆（调整宽高比例可得到扁椭圆），通过绝对定位脱离文档流，并用z-index控制叠加层级：

.oval {
  position: absolute;
  border-radius: 50%;
}

.oval1 {
  width: 400px;
  height: 300px;
  background-color: rgba(255, 107, 107, 0.2);
  top: -50px;
  left: -80px;
  z-index: 1;
}

.oval2 {
  width: 350px;
  height: 280px;
  background-color: rgba(107, 153, 255, 0.15);
  top: 100px;
  right: -60px;
  z-index: 2;
}

.oval3 {
  width: 280px;
  height: 250px;
  background-color: rgba(255, 214, 107, 0.1);
  bottom: -40px;
  left: 20px;
  z-index: 0;
}

响应式适配（可选）
针对不同屏幕尺寸调整椭圆的大小和位置，保持视觉效果一致：

@media (max-width: 768px) {
  .oval1 {
    width: 280px;
    height: 220px;
    top: -30px;
    left: -50px;
  }
  .oval2 {
    width: 250px;
    height: 200px;
    top: 80px;
    right: -40px;
  }
  .oval3 {
    width: 200px;
    height: 180px;
    bottom: -20px;
    left: 10px;
  }
}