显示:无； vs 可见性:隐藏；
我知道“显示:无；”不会占用空间和“可见性:隐藏；”隐藏时会占用空间。
那为什么这个tooltip定义为"visibility: hidden;"不占用空间？它就像“显示:无；”
简而言之，工具提示不应与其下方的文本重叠，对吗？
.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 the tooltip */
position: absolute;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}<!DOCTYPE html>
<html>
<body style="text-align:center;">
<div class="tooltip">Hover over me
<div class="tooltiptext">Tooltip text</div>
</div>
<p>Note that the tooltip is overlapping the text beneath it. The text should appear below the tooltip position, right?</p>
</body>
</html>最佳答案
删除这部分代码。你会看到不同
/* Position the tooltip */
position: absolute;
关于html - 工具提示的 CSS 可见性规则不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55084907/