React中使用map渲染组件时无法为每个组件添加Tailwind覆盖层

你的问题出在绝对定位的参考父元素上：

• 覆盖层用了absolute定位，但它的直接父容器（包裹图片和覆盖层的div）没有设置relative定位类
• 此时绝对定位元素会向上寻找最近的、带有非static定位的父元素，也就是外层那个加了relative的div，所以覆盖层会撑满整个外层容器，而非单个电影卡片。

修复步骤 #

给每个map渲染的卡片外层div添加relative类，让覆盖层以这个卡片容器为定位基准：

修改后的核心代码：

{movies.map((item, id) =>
  <div key={item.id || id} className='relative w-[160px] sm:w-[200px] md:w-[240px] lg:w-[280px] inline-block'>
    <img className='w-full h-auto block' src={`https://image.tmdb.org/t/p/w500/${item?.backdrop_path}`} alt={item?.title} />
    <div className='absolute top-0 left-0 w-full h-full hover:bg-black/80 opacity-0 hover:opacity-100 text-white'>
      <p className='whitespace-normal text-xs md:text-sm font-bold flex justify-center h-full text-center'>{item?.title}</p>
    </div>
  </div>
)}

额外提示：

• 给map渲染的元素加上key属性，优先用item.id这类唯一标识，更符合React渲染规范
• 你原来的white-space-normal是拼写错误，Tailwind的正确类名是whitespace-normal

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