Как сделать абсолютно позиционированный элемент видимым вне родительского div - PullRequest
Новая
       24

Как сделать абсолютно позиционированный элемент видимым вне родительского div

0 голосов
/ 29 мая 2019

Я пытаюсь заставить всплывающие подсказки работать правильно в прокручиваемом контейнере div.Чтобы добиться этого, я установил абсолютную позицию всплывающих подсказок, а относительный родительский элемент (.panel-section).Проблема с самой первой подсказкой, которая должна быть видна поверх .panel-header, но теперь она идет «под» и не видна. 

.panel {
        margin: 50px;
        width: 500px;
        border: 1px solid black;
      }

      .panel-header {
        height: 2rem;
        background-color: silver;
        border-bottom: 1px solid black;
      }

      .panel-content {
        overflow-y: auto;
        height: 500px;
      }

      .panel-section {
        position: relative;
      }

      h1,
      h2 {
        margin: 0;
      }

      .tooltip {
        width: 200px;
        height: 50px;
        border: 1px solid silver;
        background-color: #333333ee;
        color: silver;
        position: absolute;
        top: -50px;
        display: none;
      }

      .panel-section:hover .tooltip {
        display: block;
      }
<html>
  <body>
    <div class="panel">
      <div class="panel-header">
        <h1>Header content</h1>
      </div>
      <div class="panel-content">
        <div class="panel-section">
          <h2>Blah blah</h2>
          <div class="tooltip">
            tooltip content
          </div>
          <p>
            (hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
            tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
            maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
            egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
            Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
            tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
            nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
            consequat suscipit. Morbi convallis tortor in iaculis aliquet.
          </p>
        </div>

        <div class="panel-section">
          <h2>Blah blah</h2>
          <div class="tooltip">
            tooltip content
          </div>
          <p>
            (hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
            tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
            maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
            egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
            Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
            tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
            nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
            consequat suscipit. Morbi convallis tortor in iaculis aliquet.
          </p>
        </div>

        <div class="panel-section">
          <h2>Blah blah</h2>
          <div class="tooltip">
            tooltip content
          </div>
          <p>
            (hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
            tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
            maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
            egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
            Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
            tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
            nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
            consequat suscipit. Morbi convallis tortor in iaculis aliquet.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>
...