ツールチップを正しい位置に配置する相対的な位置決めはどのようにして行われますか？

Question

Here's CSSのツールチップの例。作者はツールチップを相対的に配置します。

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

しかし、tutorialは、

相対を言います。このタイプの測位はおそらく最も混乱しており、 が誤用されています。それが本当に意味するのは、「それ自身との関係」です。 の位置を設定した場合：relative;要素には他の位置決め属性 （上、左、下または右）は​​ありません。 の位置には何の効果もありません。位置として残した場合とまったく同じです。 static;しかし、例えば top：10px;という別のポジショニング属性を与えても、それは位置が10ピクセル下になるので、そこから がノーマルになるはずです。私はあなたが想像することができると確信している、それは通常の位置に基づいて 要素を周りにシフトする機能は非常に便利です。私は 自分自身がこれを使って何度もフォーム要素を整列させて、 の傾向を持っていることがわかりました。

位置を設定すると他のことが起こります。知っておくべきである 要素に追加してください。 1つは、 要素でz-indexを使用する機能を導入したことです。これは、実際には の静的に配置された要素では機能しません。 Z-インデックス値を設定しない場合でも、 この要素は、静的に配置された他の要素の上に現れます。 要素。静的に配置された要素 に高いz-インデックス値を設定すると、それにぶつかることはできません。もう1つのことは、 が完全に配置された子要素の範囲を制限することです。比較的配置された要素の子である任意の要素 は、そのブロック内に絶対に とすることができます。これは私がここで話しているいくつかの強力な機会をもたらします。私が理解

はstaticに相当し、ページの流れで行くrelativeなどleft、topのような修飾なし、ということです。次に、正しい位置、つまりハイパーリンクの上にツールチップがどのように表示されていますか？代わりにページの最後に表示されるべきですか？

Answer 1

ツールチップに指定したCSSが完全ではありません。私はあなたがそれを見たと思うw3schools。しかし、それには2つの要素があることに注意してください：.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>