子要素に影響を与えないようにする HTML の下部配置テクニック

Question

ツールヒント付きのテキストがあります。ボックス自体のプロパティは変更できませんが、ツールチップをテキストの上に配置したいと考えています。これが私の現在のコードです:

リーリー リーリー

私が望むことを達成する最良の方法は、tooltip-text で bottom: 100% を使用することだと思いますが、これを行うと、bottom tt-container の下部を基準とするのではなく、ページの下部を基準として計算されます。これは、tt-container で position:relative を使用する必要があるためだと思いますが、これによりツールヒントがボックスの端で覆われてしまいます。 tt-container の外側に position:relative で別の div を作成しようとしましたが、結果は同じで、他の方法がわかりません。これは可能でしょうか?

Answer 1

リーリー リーリー

親要素を基準にして配置するには、親要素の position:relative を position:absolute に設定する必要があります。 overflow: auto; のため、ツールチップ ボックスをボックスの外に作成することはできません。