CSS如何解决notch无法叠加在FiveM手机外壳图片上的问题

问题核心原因 #

• 设为position: absolute的元素会优先寻找最近的非static定位的祖先元素作为偏移基准，当前代码中所有外层容器都未设置定位属性，导致.notch偏移参考对象错误，无法对齐到手机壳图片上方
• .notch同时设置了top: 0和bottom: 30px两个垂直方向定位属性，和预设的height:27px冲突，会导致元素高度被异常拉伸
• 手机壳图片为默认静态定位，z-index属性不生效，叠放顺序不受控制

问题效果预览 #

可直接复用的修复方案 #

1. 给外层容器添加定位基准，作为内部所有绝对定位元素的偏移参考

.container {
  position: relative;
  width: fit-content; /* 自动适配手机壳图片尺寸 */
}

2. 修正手机壳图片的基础样式，消除默认布局间隙并设置底层层级

.phone-frame {
  position: relative;
  z-index: 1;
  display: block; /* 清除img标签默认行内属性带来的底部3px间隙 */
}

3. 修正.notch的定位冲突，调整层级确保显示在最上层

.notch {
  position: absolute;
  width: 144px;
  height: 27px;
  top: 0px;
  /* 删除冲突的bottom: 30px属性 */
  left: 73px;
  z-index: 10;
  background: black;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

4. 给手机内容容器设置全屏定位，和手机壳图片完全重合

.phone-container {
  position: absolute;
  inset: 0; /* 四个方向偏移都为0，铺满父容器和手机壳完全对齐 */
  z-index: 2;
}

说明：内部的摄像头、听筒元素已经设置了绝对定位，修复后会自动以.notch为基准偏移，不需要额外调整样式。

修复后完整HTML结构参考 #

<div class="container disableSelection">
  <img src="你的手机外壳图片路径" class="phone-frame">
  
  <div class="phone-container phone-background">
    <div id="notch" class="notch">
      <div class="camera"></div>
      <div class="speaker"></div>
    </div>
    <!-- 其余手机界面内容可放在该容器内 -->
  </div>
</div>

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