Как «относительное» позиционирование размещения всплывающей подсказки в правильном положении?

Question

Here's пример всплывающей подсказки CSS. Автор позиционирует инструмент относительно.

.tooltip{ 
    display: inline; 
    position: relative; 
} 

Однако tutorial говорит,

Относительная. Этот тип позиционирования, вероятно, является самым запутанным, а используется неправильно. На самом деле это означает «относительно себя». Если вы установили позиция: относительная; на элементе, но никаких других атрибутов позиционирования (сверху, слева, снизу или справа), это не повлияет на его позиционирование на , все будет точно так же, как если бы вы оставили его как позицию: static; Но если вы дадите ему какой-то другой атрибут позиционирования, скажем, top: 10px ;, он сдвинет его положение на 10 пикселов DOWN, откуда будет НОРМАЛЬНО. Я уверен, что вы можете себе представить, что возможность смещения элемента вокруг его регулярной позиции очень полезна. Я нахожу сам, используя это, чтобы выстраивать элементы формы много раз, у которых есть тенденция , чтобы не захотеть выстроить, как я их хочу.

Есть два других вещей, которые возникают, когда вы устанавливаете положение: относительное; на элементе , о котором вы должны знать. Один из них заключается в том, что он вводит возможность использования z-индекса для этого элемента , что на самом деле не работает с статически расположенными элементами . Даже если вы не установили значение z-index, этот элемент теперь появится поверх любого другого статически расположенного элемента . Вы не можете бороться с ним, установив более высокое значение z-индекса на элемент статического позиционирования . Другое дело, что это ограничивает рамки абсолютно позиционированных дочерних элементов. Любой элемент , являющийся дочерним элементом относительно расположенного элемента, может быть абсолютно , расположенным внутри этого блока. Это вызывает некоторые мощные возможности, о которых я говорю здесь.

То, что я понимаю, что, без модификаторов, как top, left и т.д. relative эквивалентно static и идет с потоком страницы. Затем, как всплывающая подсказка отображается в правильном положении, то есть над гиперссылкой? Не должно ли оно появляться в конце страницы?

Answer 1

CSS, предоставленный для всплывающей подсказки, не является полным. Я думаю, вы видели его в w3schools. Но обратите внимание, что для него есть два элемента: родительский элемент с классом .tooltip и дочерний элемент (фактический текст подсказки) внутри него с классом .tooltiptext.

Родительский элемент имеет position: relative без каких-либо top, left ... позиций, которые действуют так, как вы сказали, как статический элемент в его исходном (нормальном) месте. Но дочерний tooltiptext внутри него имеет position: absolute, поэтому он отделен от обычного текстового потока и накладывает на них.

Вот пример:

.tooltip { 
 
    /* this is just to add meaning for position:absolute of .tooltiptext */ 
 
    position: relative; 
 
    
 
    color: navy; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
    top: 100%; 
 
    left: 10%; 
 
    
 
    /* style the tooltip */ 
 
    min-width: 50px; 
 
    background-color: #ff9; 
 
    color: black; 
 
    font-size: 10pt; 
 
    border-radius: 3px; 
 
    padding: 3px 10px 6px; 
 
    white-space: nowrap; 
 
    
 
    visibility: hidden; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
}

<span>Sample: </span> 
 

 
<span class="tooltip">Hover over me 
 
    <span class="tooltiptext">Tooltip text</span> 
 
</span>