我正在创建一个查看器栏，显示位于特定大小absolute的relative定位父项内的点。点应该从父 div 的左侧和顶部出现一定的百分比。出于某种原因，当点超过某个百分比时，它们会溢出父级。如何将点保持在父 div 的范围内？
父 div 嵌套在 bootstrap 中.card。
.some-stuff {
height: 40px;
width: 100%;
background-color: purple;
color: white;
}
.box {
border: 1px solid;
position: relative;
height: 100px;
}
.dot {
position: absolute;
top: 100%;
left: 50%;
}<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="card">
<div class="some-stuff">
Here's some stuff that wont move
</div>
<div class="box">
<div class="dot">
̇
</div>
</div>
</div>这是一个显示我的问题的小提琴：http : //jsfiddle.net/coopersamuel/ky7xzq1f/
无论出于何种原因，如果将 .dot 的 line-height 属性设置为 0（或点的确切高度），则此问题是固定的。我实际上不清楚为什么（我删除了我之前的解释，因为它不太正确）。如果您将任何其他文本插入到具有特殊字符的 HTML 中，它就会完全符合您的预期。我怀疑它是那个特殊字符的问题，它可能显示在文本的底行下方。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句