CSS元素在图片上叠加：掌握position: absolute的定位上下文

<div class="image-overlay-container">
  <!-- 背景图片 -->
  <img src="https://via.placeholder.com/600x400/0000FF/FFFFFF?text=Background+Image" alt="背景图片" class="background-image">

  <!-- 叠加元素：模拟手机刘海区域 -->
  <div class="notch-overlay">
    <div class="notch">
      <div class="camera"></div>
      <div class="speaker"></div>
    </div>
  </div>
</div>

/* 1. 父容器：提供定位上下文 */
.image-overlay-container {
  position: relative; /* 关键：使其内部的绝对定位元素相对于它定位 */
  width: 600px; /* 根据图片实际宽度或设计需求设置 */
  height: 400px; /* 根据图片实际高度或设计需求设置 */
  overflow: hidden; /* 防止内容溢出容器 */
  border: 1px solid #ccc; /* 示例边框，方便观察 */
}

/* 2. 背景图片样式 */
.background-image {
  width: 100%;
  height: 100%;
  display: block; /* 移除图片底部默认空白 */
  object-fit: cover; /* 确保图片覆盖整个容器，保持比例 */
}

/* 3. 叠加层容器：覆盖整个图片区域，作为刘海的直接父级 */
.notch-overlay {
  position: absolute; /* 绝对定位，相对于 .image-overlay-container */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* 确保在图片上方 */
  /* background-color: rgba(255, 0, 0, 0.1); /* 调试用，可移除 */
}

/* 4. 刘海（notch）元素样式 */
.notch {
  position: absolute; /* 相对于 .notch-overlay 定位 */
  width: 144px;
  height: 27px;
  top: 0px; /* 位于叠加层顶部 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 实际居中 */
  z-index: 4; /* 确保在 .notch-overlay 的任何背景色之上 */
  background: black;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  display: flex; /* 使用 Flexbox 布局内部的 camera 和 speaker */
  justify-content: center;
  align-items: center;
  gap: 10px; /* 内部元素间距 */
}

/* 5. 摄像头（camera）元素样式 */
.camera {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #0d4d71;
}

/* 6. 听筒（speaker）元素样式 */
.speaker {
  height: 6px;
  width: 60px;
  background: #171818;
  border-radius: 6px;
}