Tailwind CSS React中z-index失效 日历弹窗被下层元素遮挡

问题根因 #

z-index 生效的前提是元素处于同一个层叠上下文，你之前的配置只给日期选择器的直接父容器加了z-50，但存在两个核心问题：

1. 承载日期选择器的UnderHeader组件和下方的Featured组件是同层DOM兄弟节点，默认DOM流中靠后渲染的Featured组件层级天然高于靠前的UnderHeader，UnderHeader本身没有设置定位属性和z-index，内部子元素的z-index再高，也无法突破父组件本身的层级限制。
2. DateRange组件本身没有设置背景色和z-index，即使层级正确也会出现内容透传的视觉问题，同时Featured组件内的图片额外加了z-[1]，进一步抬升了下方元素的层级。

修复步骤 #

• 第一步：给UnderHeader组件的最外层容器添加定位属性和层级，让整个组件的层级高于下方的Featured区块，修改最外层div类名如下：

<div className="w-screen h-80 max-h-7xl drop-shadow-lg relative z-40">

注意：z-index 必须配合relative/absolute/fixed/sticky这类非static定位值才能生效。

• 第二步：给DateRange日期选择器组件添加背景、阴影和内部z-index，避免内容透传，修改组件类名如下：

<DateRange
  editableDateInputs={true}
  onChange={(item) => setDate([item.selection])}
  moveRangeOnFirstSelection={false}
  ranges={date}
  className="absolute top-[50px] z-50 bg-white rounded-md shadow-xl"
/>

• 第三步（建议）：移除Featured组件内img标签上多余的z-[1]属性，避免制造不必要的层叠冲突，修改后img标签类名如下：

<img
  src="https://images.unsplash.com/photo-1472213984618-c79aaec7fef0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=855&q=80"
  alt=""
  className="w-full object-fit"
/>

修改完成后重启开发服务器验证，日历弹窗和人数选择弹窗都会正常浮在下方内容之上，不会被遮挡。

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