Flexbox 项目的图像和文本重叠绝对定位 div（工具提示）

Question

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

Answer 1

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

*
{
  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>

Flexbox 项目的图像和文本重叠绝对定位 div（工具提示）

images and text of a flexbox item overlapping absolute positioned div (tooltip)

css

overlapping