html - 绝对定位的 div 溢出相对父级的边界

Question

我正在创建一个查看器栏，它显示位于特定大小的 relative 父元素内的 absolute 点。这些点应该从父 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">
      &#x0307;
    </div>
  </div>
</div>

这是一个显示我的问题的 fiddle :http://jsfiddle.net/coopersamuel/ky7xzq1f/

Answer 1

无论出于何种原因，如果您将 .dot 的 line-height 属性设置为 0(或者点的确切高度是什么)，这将得到解决。我实际上并不清楚为什么(我删除了我之前的解释，因为它不太正确)。如果您将任何其他文本插入到 HTML 中您具有特殊字符的位置，它就会与您期望的完全一致。我怀疑是那个特殊字符的问题，它可能会显示在文本的底线下方。