在以下代碼片段中,為什么工具提示內容與其父級的左邊緣對齊?
如果我在內容與左邊緣對齊時給出.tooltip-trigger
類的顯示inline-block
,但如果我不給.tooltip-trigger
類行內塊,則內容與主體的左邊緣對齊。
我無法理解這種絕對位置的行為。有人可以解釋為什么 inline-block 會影響具有絕對位置的元素的定位。
tooltip-trigger
-inline-block
內容與父級的左邊緣對齊
tooltip-trigger
-without inline-block
內容與正文的左邊緣對齊
帶有行內塊的代碼
<style>
.tooltip {
display: none;
background: white;
border: 1px solid;
}
.tooltip-trigger:hover .tooltip {
display: block;
position: absolute;
}
.tooltip-trigger {
display: inline-block;
}
</style>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis illum praesentium quos aspernatur excepturi molestiae quibusdam, deserunt quo voluptas animi.
<a href="/" class="tooltip-trigger">
ToolTip Region
<span class="tooltip">
Some dummy tooltip content
</span>
</a> Lorem ipsum dolor sit amet.
</p>
沒有行內塊的代碼
<style>
.tooltip {
display: none;
background: white;
border: 1px solid;
}
.tooltip-trigger:hover .tooltip {
display: block;
position: absolute;
}
</style>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis illum praesentium quos aspernatur excepturi molestiae quibusdam, deserunt quo voluptas animi.
<a href="/" class="tooltip-trigger">
ToolTip Region
<span class="tooltip">
Some dummy tooltip content
</span>
</a> Lorem ipsum dolor sit amet.
</p>
uj5u.com熱心網友回復:
如果您沒有為絕對定位指定“坐標”,則元素將絕對定位在正常流中渲染的位置(如果未定位)。洗掉 position:absolute,然后檢查工具提示元素在正常流程中的渲染方式,當您不制作觸發器行內塊時。
為什么inline-block會影響這個元素的正常流動
因為您正在制作 tooltip block
,所以當觸發器不是 時,它會自行進入一行inline-block
。一旦你使它成為行內塊,它就會創建一個包含工具提示元素的新框。給它們加上一個輪廓,然后你會更清楚地看到差異
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/530262.html
標籤:css
上一篇:為什么帶有::after選擇器的div將自身定位在CSS中的原始div內
下一篇:根據特定維度設定css