React与Tailwind图片Hover后后续元素遮挡问题求助

问题原因 #

你遇到的悬停图片被后续图片覆盖的问题，核心是堆叠上下文的优先级限制：

• 所有Gallery组件的容器<a>标签都设置了relative z-0，属于同一层级的堆叠上下文。
• HTML流中，后续元素默认堆叠层级高于前面的元素，所以当你悬停前面的图片时，后续的<a>容器会覆盖在它上方——哪怕给图片设置更高的z-index也没用，因为子元素的z-index仅在父容器的堆叠上下文内生效，无法突破父容器的层级限制。

修复步骤 #

给悬停状态的Gallery容器（<a>标签）设置更高的z-index，让整个容器的堆叠层级提升，覆盖后续容器。

修改后的代码 #

Gallery.js #

import React, { useState } from 'react';

function Gallery(props) {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <a
      href="#"
      className={`border border-newgrey p-5 w-max h-max max-w-2xl relative z-0 transition ${isHovered ? 'z-50' : ''}`}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <img
        className={`object-scale-down transition filter z-10 ${isHovered ? 'scale-125 brightness-50' : ''}`}
        src={props.portrait}
        alt=""
      />
      <h2
        className={`absolute bottom-2/4 left-2/4 text-5xl transition opacity-0 translate-x-[-50%] translate-y-[-50%] ${isHovered ? 'text-white scale-125 opacity-100' : ''}`}
      >
        Cat
      </h2>
    </a>
  );
}

export default Gallery;

额外优化 #

原代码中<h2>的定位可以加上translate-x-[-50%] translate-y-[-50%]，让文字完全居中（避免因元素自身尺寸导致偏移）。

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