Question

我正在使用display: flex为升级项目创建面板。代码看起来像这样，我尽力重新创建它：fidle 。现在，我不明白为什么图像会重叠到工具提示中（将鼠标悬停在元素上以显示工具提示）。这很奇怪，我以为是因为display: flex，所以我尝试使用grid做同样的事情，但是没有运气。工具提示必须为position: absolute，尤其是因为我打算添加一些JavaScript，因此工具提示框位于光标之后。是什么导致这种行为？我在想与flexbox / grid和绝对定位有关，但是我对CSS不太好

Answer 1

向.tooltip类添加z-index值。

*
{
  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重叠（工具提示）

1 个答案: