'relative'定位如何将工具提示放置在正确的位置？

Question

下面是一个CSS工具提示的示例。作者对该工具进行了相对定位。

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

然而，教程中说，

相对。这种类型的定位可能是最令人困惑和误用。它的真正含义是"相对于自身"。如果你设置位置：相对；在元素上，但没有其他定位属性(顶部、左侧、底部或右侧)，它不会影响其在总之，如果你把它留在原来的位置，它将是完全一样的：静止的但如果你给它一些其他的定位属性，比如，顶部：10px；，它将把它的位置从原来的位置向下移动10个像素我相信你可以想象基于其常规位置的元素是非常有用的。我发现我多次使用它来排列具有倾向于不想按照我希望的方式排列。

有两个当你设置位置时会发生其他事情：相对；在您应该注意的元素。一个是它引入了在该元素上使用z-index的能力，这与静态定位的元件。即使没有设置z索引值，该元素现在将出现在任何其他静态定位的元素之上要素你不能通过在静态定位的元件。发生的另一件事是限制了绝对定位的子元素的范围。任何元素即相对定位元素的子元素可以是绝对的位于该区块内。这带来了一些强大的我在这里谈论的机会。

我所理解的是，如果没有top、left等修饰符，relative相当于static，并与页面的流程一致。那么工具提示如何显示在正确的位置，即超链接上方？它不应该出现在页面的末尾吗？

Answer 1

您为工具提示提供的CSS不完整。我想你在w3schools看到过。但请注意，它有两个元素：一个是具有.tooltip类的父元素，另一个是其内部具有.tooltiptext类的子元素(实际工具提示文本)。

父元素具有没有任何top、left…的position: relative。。。位置，正如您所说，在其原始(正常)位置充当静态元素。但是它里面的子工具提示文本有一个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>