изображения и текст элемента flexbox, перекрывающие абсолютный позиционный элемент div (всплывающая подсказка) - PullRequest
Новая
       9

изображения и текст элемента flexbox, перекрывающие абсолютный позиционный элемент div (всплывающая подсказка)

0 голосов
/ 29 июня 2018

Я использую display: flex для создания панелей для моих предметов апгрейда. Код выглядит примерно так, я пытался воссоздать его как можно лучше: fidle , Теперь я не понимаю, почему изображения накладываются на всплывающую подсказку (наведите указатель мыши на элементы, чтобы появилась подсказка). Это очень странно, я думал, что это из-за display: flex, поэтому я попытался сделать то же самое, используя сетку, но не повезло. Подсказка должна быть position: absolute, особенно потому, что я планирую добавить немного javascript, чтобы окно подсказки следовало за курсором. Что вызывает такое поведение? Я думаю, что есть что-то общее с flexbox / grid и абсолютным позиционированием, но я не очень хорош в css

1 Ответ

0 голосов
/ 29 июня 2018

Добавьте значение 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>
...