позиция: относительная, но братья и сестры думают, что элемент не существует - PullRequest
Новая
       16

позиция: относительная, но братья и сестры думают, что элемент не существует

0 голосов
/ 29 апреля 2019

Я создаю подсказку.Моя проблема в том, что когда появляется всплывающая подсказка, братья и сестры двигаются, в отличие от position: absolute.Я не могу использовать абсолютную позицию, потому что она позиционирует всплывающую подсказку относительно окна браузера, а не ее исходную позицию.

HTML 

<p class="tooltip-anchor">Hover me</p>
<span class="tooltip">Hello!</span>

CSS 

.tooltip-anchor:hover + .tooltip {
    display: inline-block;
}

.tooltip {
    display: none;
    position: relative;
    color: #fff;
    background: #333;
    padding: 0.25em;
}

Я сделал демо на Code Pen.

1 Ответ

0 голосов
/ 29 апреля 2019

С некоторыми режимами вашего кода вы можете получить то, что вы хотите.Если вы вставите интервал в тег p, вы можете установить абсолютную позицию для интервала (и позицию относительно его контейнера), а затем изменить ее позицию по своему усмотрению.

Абсолютная позиция: элементудаляется из обычного потока документов, и для элемента в макете страницы не создается пространство.Он расположен относительно своего ближайшего предка, если таковой имеется;в противном случае он размещается относительно исходного содержащего блока.Его окончательная позиция определяется значениями сверху, справа, снизу и слева. 

<p style="font-size: 17px;">A simple tooltip. CSS is wonderful, may I say.</p>

<p class="tooltip-anchor">Hover me <span class="tooltip">Hello!</span></p>

<p>Hello</p>

CSS 

body {
    font-family: sans-serif;
    font-size: 18px;
    text-align: center;
}

.tooltip-anchor{position:relative;display:inline-block;}/* modified */

.tooltip-anchor:hover  .tooltip {
    display: inline-block;
}

.tooltip {
    display: none;
    position: absolute;
    bottom: 20px;/* modified */
    left:-40px;/* modify for center */
    color: #fff;
    background: #333;
    padding: 0.25em;
    min-width: 150px;
    text-align: center;
}
...