如何在网站背景与Header内容间添加Z轴层级的绝对定位椭圆元素？

核心要解决两个问题：绝对定位元素的定位上下文，以及static定位元素不支持z-index的问题，具体方案如下：

方案一：基于父容器的定位上下文 #

修正后的HTML #

<div class="bg">
  <div class="ellipse"></div>
  <div class="header">
    <h1>Hello World!</h1>
  </div>
</div>

对应的CSS #

.bg{
  background: green;
  position: relative; /* 为绝对定位的椭圆提供定位基准 */
}
.header{
  height: 500px;
  position: relative; /* 开启定位上下文，让z-index生效 */
  z-index: 1; /* 确保header内容显示在椭圆上方 */
}
.ellipse{
  position: absolute;
  z-index: 0;
  width: 600px; /* 根据设计需求调整尺寸 */
  height: 300px;
  border-radius: 50%; /* 实现椭圆形状 */
  background: rgba(255, 255, 255, 0.3); /* 示例背景色，按需修改 */
  top: 100px; /* 调整垂直位置 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中椭圆 */
}

方案二：将椭圆嵌入header内部 #

如果希望椭圆仅相对于header定位，可以把椭圆放在header内部，这样不需要额外调整.bg的定位：

HTML #

<div class="bg">
  <div class="header">
    <div class="ellipse"></div>
    <h1>Hello World!</h1>
  </div>
</div>

CSS #

.bg{
  background: green;
}
.header{
  height: 500px;
  position: relative; /* 为内部的椭圆提供定位基准 */
}
.ellipse{
  position: absolute;
  z-index: 0;
  width: 600px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}
.header h1{
  position: relative; /* 让标题层级高于椭圆 */
  z-index: 1;
}

关键说明 #

1. 绝对定位元素必须依赖非static定位的父元素作为定位上下文，所以需要给父容器（.bg或.header）添加position: relative
2. 默认static定位的元素不支持z-index，因此需要给需要提升层级的元素（.header或h1）添加position: relative，才能通过z-index控制层级关系

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