<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>菜鳥(niǎo)教程(runoob.com)</title>
</head>
<style>
.tooltip?{
????position:?relative;
????display:?inline-block;
????border-bottom:?1px?dotted?black;
}
.tooltip?.tooltiptext?{
????visibility:?hidden;
????width:?120px;
????background-color:?black;
????color:?#fff;
????text-align:?center;
????border-radius:?6px;
????padding:?5px?0;
????position:?absolute;
????z-index:?1;
????bottom:?150%;
????left:?50%;
????margin-left:?-60px;
}
.tooltip?.tooltiptext::after?{
????content:?"";
????position:?absolute;
????top:?100%;
????left:?50%;
????margin-left:?-5px;
????border-width:?5px;
????border-style:?solid;
????border-color:?black?transparent?transparent?transparent;
}
.tooltip:hover?.tooltiptext?{
????visibility:?visible;
}
</style>
<body?style="text-align:center;">
<h2>頂部提示框/底部箭頭</h2>
<div?class="tooltip">鼠標(biāo)移動(dòng)到我這
??<span?class="tooltiptext">提示文本</span>
</div>
</body>
</html>after里面的top是怎么來(lái)定位，讓三角和上面的框銜接？搞不懂原因
3 回答
已采納
習(xí)慣受傷
TA貢獻(xiàn)885條經(jīng)驗(yàn) 獲得超1144個(gè)贊
.tooltiptext 的 after 是根據(jù) .tooltiptext 為相對(duì)位置布局，下邊這句?
border-width:?5px; border-style:?solid; border-color:?black?transparent?transparent?transparent;
是實(shí)現(xiàn)三角的重要代碼。
在?.tooltiptext::after 中沒(méi)有定義三角的寬高，而上邊定義了?border-width: 5px; 導(dǎo)致?.tooltiptext::after 的寬高變成了 10，只有最上邊顏色為 black，所以就顯示了倒三角。
?.tooltiptext::after 中 這一句：top: 100%;?left: 50%; ?margin-left: -5px;?將倒三角布局在了??.tooltiptext 元素的下邊中間， 因?yàn)閷捀邽?10px，向左移動(dòng)5px，恰好在中間。
top:100%; 100% 就是?.tooltiptext 元素的高度，所以貼在?.tooltiptext 元素下邊。
guoyou
TA貢獻(xiàn)28條經(jīng)驗(yàn) 獲得超30個(gè)贊
?top:?100%; ? ?的100%是相對(duì)于它已定位的父元素.tooltiptex高，因?yàn)槟愀冈氐母呤?8px, 所以設(shè)置?top:?28px;也可以得到相同的效果
添加回答
舉報(bào)
0/150
提交
取消