“相对”定位如何将工具提示放置在正确的位置？

Question

Here's CSS 工具提示的示例。作者相对定位了toollip。

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

但是，tutorial 说，

相对。这种类型的定位可能是最令人困惑和 误用。它的真正含义是“相对于自身”。如果你设置 位置：相对；在一个元素上但没有其他定位属性 （上，左，下或右），它不会影响它的定位 全部，如果您将其保留为位置，它将完全一样： 静止的;但是如果你给它一些其他的定位属性，比如说， top: 10px;，它会将它的位置从它的位置向下移动 10 个像素 通常会。我相信你可以想象，能够改变 基于其常规位置的元素非常有用。我发现 我自己多次使用它来排列具有 倾向于不想按照我想要的方式排列。

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

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

Answer 1

您为工具提示提供的 CSS 不完整。我想你在w3schools 中看到了它。但请注意，它有两个元素：一个带有.tooltip 类的父元素和一个带有.tooltiptext 类的子元素（实际工具提示文本）。

父元素有position: relative，没有任何top、left ...位置，就像您所说的在其原始（正常）位置作为静态元素。但是其中的子工具提示文本有一个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>