Z-index not working for a div that is positioned absolute

Question

I have an information icon and I want to display a div when the icon is hovered, and the div should be a bit above the icon (so both are still visible). I have the below React component and CSS right now, but the Z-index doesn't appear to be doing anything. I've attached some images for reference. What do I need to change to implement this effect?

React Component:

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 , elements are positioned based on their nearest positioned element. If you don't set the parent element position as relative, it is possible your element can position relative to root html element (which is relative position by default) if it don't find any positioned element in the hierarchy. So its better to position your parent element as position relative to avoid unwanted issues. And for making the div element visible above your information icon, you need to move it from bottom with 20px (since you used 20px for icon size) to achieve the desired behaviour.

Refer the codesandbox link

Answer 2

Your question is more related to basics of CSS. If you want to position something relative to some other element, try making that element its child.

Then give parent a display property of relative and give child a property absolute .

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

React Component:

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