React中绝对定位div的Z-index失效：hover图标悬浮层实现问询

我有一个信息图标，希望鼠标悬停时显示一个位于图标上方的div（确保两者均可见）。当前使用以下React组件和CSS代码，但Z-index未生效，附参考截图。请问需要如何修改实现该效果？

现有React组件代码 #

const InformationSymbol = () => {
    const [isVisible, setIsVisible] = useState(false);

    return (
        <div>
            {isVisible ? (
                <div
                    className="information-detail-container"
                    onMouseLeave={() => setIsVisible(false)}
                >
                    <span>some random text</span>
                </div>
            ) : null}
            <div>
                <div
                    onMouseOver={() => {
                        setIsVisible(true);
                    }}
                    className="information-icon"
                >
                    <label>i</label>
                </div>
            </div>
        </div>
        );
    };

现有CSS代码 #

.information-icon {
  background-color: #373f51;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  cursor: pointer;
  position: relative;        
}
    
.information-detail-container {
  background-color: #e7e9ef;
  width: 250px;
  position: absolute;
  font-weight: 500;
  font-size: 14px;
  padding: 5px;
  border-radius: 12px;
  margin: 0px;
  z-index: 10;
}

参考截图 #

问题根源 #

1. 提示框使用position: absolute但未绑定正确定位基准：提示框和图标不在同一父容器，图标上的position: relative无法对提示框定位产生作用，导致提示框定位上下文为整个文档。
2. 鼠标事件逻辑缺陷：仅在图标绑定onMouseOver、提示框绑定onMouseLeave，鼠标从图标移到提示框时会触发图标隐式的onMouseLeave，导致提示框消失。
3. Z-index未生效：提示框和图标不在同一定位上下文，层级控制失效。

修改步骤及代码 #

1. 调整DOM结构与事件绑定

将提示框移入图标所在父容器，把hover事件绑定到父容器，确保鼠标在图标或提示框范围内时提示框保持显示。

修改后的React组件：

const InformationSymbol = () => {
    const [isVisible, setIsVisible] = useState(false);

    return (
        <div 
            className="information-wrapper"
            onMouseEnter={() => setIsVisible(true)}
            onMouseLeave={() => setIsVisible(false)}
        >
            {isVisible && (
                <div className="information-detail-container">
                    <span>some random text</span>
                </div>
            )}
            <div className="information-icon">
                <label>i</label>
            </div>
        </div>
    );
};

2. 修正CSS定位与层级

给父容器设置position: relative作为提示框定位基准，调整提示框位置到图标上方，确保z-index生效。

修改后的CSS：

/* 新增父容器样式，作为定位基准 */
.information-wrapper {
  position: relative;
  display: inline-block; /* 避免父容器占满整行 */
}

.information-icon {
  background-color: #373f51;
  height: 20px;
  width: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  cursor: pointer;
}
    
.information-detail-container {
  background-color: #e7e9ef;
  width: 250px;
  position: absolute;
  font-weight: 500;
  font-size: 14px;
  padding: 5px;
  border-radius: 12px;
  margin: 0px;
  z-index: 10;
  /* 设置定位位置，显示在图标上方并水平居中 */
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

说明 #

• 父容器information-wrapper的position: relative让提示框的absolute定位绑定到该容器，解决定位基准问题。
• 父容器绑定onMouseEnter/onMouseLeave，确保鼠标在图标或提示框内时提示框持续显示。
• bottom: calc(100% + 8px)和transform: translateX(-50%)让提示框精准显示在图标上方并居中，此时z-index在同一定位上下文内生效，确保提示框层级高于图标。

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