Z-index 不适用于绝对定位的 div

Question

我有一个信息图标，我想在图标悬停时显示一个 div，div 应该在图标上方一点（因此两者仍然可见）。 我现在有下面的 React 组件和 CSS，但 Z-index 似乎没有做任何事情。 我附上了一些图片以供参考。 我需要更改什么才能实现此效果？

反应组件：

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;
}

Answer 1

position: absolute ，元素根据最近的定位元素定位。 如果您没有将父元素位置设置为相对位置，如果在层次结构中找不到任何定位元素，则您的元素可能会相对于根 html 元素（默认情况下为相对位置）进行定位。 因此最好将您的父元素定位为相对位置以避免不必要的问题。 为了使信息图标上方的 div 元素可见，您需要将其从底部移动 20px（因为您使用 20px 作为图标大小）以实现所需的行为。

请参考codesandbox 链接

Answer 2

您的问题与 CSS 的基础知识更相关。如果您想 position 与其他元素相关，请尝试将该元素作为其子元素。

然后给 parent 一个relative的display属性，给 child 一个absolute属性。

具有position: absolute; 相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。

反应组件：

export default function TestComponent() {
  const [showTip, setShowTip] = React.useState(false);
  return (
    <div className="App">
      <div
        className="tooltip-button"
        onMouseOver={() => setShowTip(true)}
        onMouseLeave={() => setShowTip(false)}
      >
        i
        {showTip ? (
          <div className="tooltip-text">
            <p> Stay away from </p>
          </div>
        ) : null}
      </div>
    </div>
  );
}

CSS：

.tooltip-button {
  border: 1px solid black;
  position: relative;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  text-align: center;
  background-color: black;
  color: white;
  cursor: pointer;
}

.tooltip-text {
  /* importnat properties */
  position: absolute;
  top: -1rem;
  left: 1rem;

  /* rest of it */
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content;
  padding: 0.5rem;
  height: 1rem;
  color: black;
  background-color: lightgrey;
  border-radius: 1rem;
}