Question

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

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

然而，tutorial说，

相对即可。这种类型的定位可能是最令人困惑的   误用。它的真正含义是“相对于自身”。如果你设置   位置：相对;在元素上但没有其他定位属性   （顶部，左侧，底部或右侧），它对它的定位没有影响   所有，如果你把它留作位置，它将是完全一样的：   静态的;但是，如果你给它一些其他的定位属性，比方说，   顶部：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，这就是为什么它与正常的文本流分开并放在它们上面。

以下是一个示例：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: