移动端App容器CSS定位失效问题 [Tailwind CSS] [React]

我开发足球App时，需要让一个Div固定在另一个Div上方用于球员位置选择，但向下滚动时，上层Div虽然停留在原位却出现间隙，想要实现滚动时完全固定的fixed效果，多次修改position属性都没解决。

想要固定的上层Div代码 #

<div
  className={`absolute top-0 left-0 z-40 h-screen w-screen rounded bg-white text-black transition-transform duration-200 ease-in-out ${transitionClass}`}
>
  <div className="flex h-[10%] w-full justify-between p-4">
    <div className="w-16"></div>
    <div className="text-2xl font-semibold">
      <h2>{title}</h2>
    </div>
    <div className="flex w-16 justify-end">
      <FontAwesomeIcon icon={faXmark} onClick={onClose} />
    </div>
  </div>
  <div className="flex w-full flex-col px-4">{children}</div>
</div>

下方的Div代码 #

<div
  className={`absolute top-0 left-0 z-40 min-h-[100vh] w-screen rounded bg-white text-black transition-transform duration-200 ease-in-out ${transitionClass} `}
>
  <div className="flex h-[10%] w-full justify-between p-4">
    <div className="w-16"></div>
    <div className="text-2xl font-semibold">
      <h2>{title}</h2>
    </div>
    <div className="flex w-16 justify-end">
      <FontAwesomeIcon icon={faXmark} onClick={onClose} />
    </div>
  </div>
  <div className="flex w-full flex-col px-4">{children}</div>
</div>

当前问题表现 #

滚动时上层Div顶部出现空白间隙，无法完全贴合视口顶部保持固定状态。

解决方案 #

核心问题分析

1. 上层Div用absolute定位，是相对于最近的非static父元素定位，页面滚动时父元素偏移会导致间隙。
2. 两个Div都设置z-40，层级冲突，上层Div未真正置顶。
3. h-screen是视口高度，内容溢出滚动时会暴露下方空白。

修改后的代码

上层固定Div（调整定位与层级）

<div
  className={`fixed top-0 left-0 right-0 z-50 bg-white text-black transition-transform duration-200 ease-in-out ${transitionClass}`}
>
  <div className="flex h-[10%] w-full justify-between p-4">
    <div className="w-16"></div>
    <div className="text-2xl font-semibold">
      <h2>{title}</h2>
    </div>
    <div className="flex w-16 justify-end">
      <FontAwesomeIcon icon={faXmark} onClick={onClose} />
    </div>
  </div>
</div>

下方内容Div（添加顶部内边距避免遮挡）

<div
  className={`absolute top-0 left-0 z-40 min-h-[100vh] w-screen pt-[10%] rounded bg-white text-black transition-transform duration-200 ease-in-out ${transitionClass} `}
>
  <div className="flex w-full flex-col px-4">{children}</div>
</div>

额外注意事项

• 若上层Div的h-[10%]是基于视口高度，建议改为固定值（如h-[80px]），避免不同设备高度差异导致间隙。
• 检查父元素是否设置了transform、perspective或filter，这些属性会让fixed定位相对于父元素而非视口，是常见的fixed失效原因。

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