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

Question

我创建了一个查看器栏，显示位于absolute特定大小的父级relative内的点。点应该从父div的左侧和顶部出现一定百分比。出于某种原因，当点数超过一定百分比时，它们会溢出父母。如何将点保持在父div的范围内？

父div嵌套在引导程序.card中。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是表示我的问题的小提琴：http://jsfiddle.net/coopersamuel/ky7xzq1f/

Answer 1

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

Answer 2

这是一个 CSS问题。

如果您为child-element分配以下类别。

position:absolute;
top:100%;

它会将你的元素完全推到容器外面。

  

您需要将position:relative;分配给容器。否则它将采用绝对屏幕。

检查此错误小提琴:(它在屏幕下方）

我没有将position:relative分配给外部容器

.relative {
  height: 300px;
  width: 100%;
  background: green;
}

.absolute {
  border-radius: 50px;
  height: 100px;
  width: 100px;
  background: red;
  position: absolute;
  top: 100%;
  left: 50%;
}

<div class="relative">
  <div class="absolute">
  </div>
</div>

正确的例子。

.relative {
  height: 200px;
  width: 100%;
  background: green;
  position: relative;
}

.absolute {
  border-radius: 50px;
  height: 100px;
  width: 100px;
  background: red;
  position: absolute;
  top: 100%;
  left: 50%;
}

<div class="relative">
  <div class="absolute">
  </div>
</div>

.some-stuff {
  height: 40px;
  width: 100%;
  background-color: purple;
  color: white;
}

.box {
  border: 1px solid;
  position: relative;
  height: 100px;
}

.dot {
  position: absolute;
  top: 90%;
  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>

  

您top应该小于100%并且休息是试错，以便将其放入父div。