css - 与绝对定位的 div 重叠的 flexbox 元素的图像和文本(工具提示)

Question

我正在使用 display:flex 为我的升级元素创建面板。代码看起来像这样，我尽量重新创建它:fidle.现在我不明白为什么图像会重叠到工具提示中(将鼠标悬停在元素上以显示工具提示)。这很奇怪，我认为是因为 display: flex，所以我尝试使用 grid 做同样的事情，但没有成功。工具提示必须是 position: absolute，特别是因为我计划添加一些 javascript，以便工具提示框跟随光标。是什么导致了这种行为？我在想这与 flexbox/grid 和绝对定位有关，但我不太擅长 css

Answer 1

将 z-index 值添加到 .tooltip 类。

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

p
{
  font-size: 24px;
  line-height: normal;
}
img
{
  border: 1px solid grey;
  vertical-align: middle;
}
/* Upgrade wrapper & body */
#upgrades {
  height:100%;

  box-shadow:0 0 16px 4px rgb(0, 0, 0);
}
.upgrade {
  display: flex;

  width: 320px;
  height: auto;
  margin: 1em;
  position: relative;

  box-shadow: 0 0 8px 2px rgb(0, 0, 0);
}
.upgrade-img {
  width: 64px;
  height: 64px;
}
.upgrade-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-basis: 100%;

  padding: 0.5em;
}

/* Upgrade Hover Effects */
.upgrade:hover {box-shadow: 0 0 8px 2px rgb(0, 204, 255);}
.upgrade:hover .tooltip {display: initial;}

/* Tooltip */
.tooltip {
  display: none;

  width: 256px;
  height: auto;
  padding: 1em;
  position: absolute;
  top: 64px;
  left: 0;
  z-index: 100; /* <------- ADDED Z-INDEX */

  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  box-shadow: 0 0 4px 1px rgb(0, 0, 0);
}

<div class="upgrade">
  <div class="upgrade-img">
    <img src="https://source.unsplash.com/random/64x64">
    <div class="tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
    </div>
  </div>
  <div class="upgrade-body">
    <p>
      <img src="https://source.unsplash.com/random/24x24">
      100 (dmg)
    </p>
    <p>
      <img src="https://source.unsplash.com/random/24x24">
      500 (cost)
    </p>
  </div>
</div><div class="upgrade">
  <div class="image">
    <img src="https://source.unsplash.com/random/64x64">
    <div class="tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
    </div>
  </div>
  <div class="body">
    <p>
      <img src="https://source.unsplash.com/random/24x24">
      100 (dmg)
    </p>
    <p>
      <img src="https://source.unsplash.com/random/24x24">
      500 (cost)
    </p>
  </div>
</div><div class="upgrade">
  <div class="image">
    <img src="https://source.unsplash.com/random/64x64">
    <div class="tooltip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
    </div>
  </div>
  <div class="body">
    <p>
      <img src="https://source.unsplash.com/random/24x24">
      100 (dmg)
    </p>
    <p>
      <img src="https://source.unsplash.com/random/24x24">
      500 (cost)
    </p>
  </div>
</div>