为什么边界是围绕着孩子定位的

Question

我想知道为什么绝对定位的div的内容溢出边界以及如何设置容器的高度以确保什么都不会溢出。知道孩子的身高是可变的。

.container {
  border: 2px solid #fff;
  padding: 20px;
}
.absolute {
  position: absolute;
  color: #ff0000
}
.relative {
  position: relative;
}

<div id="card" class="container">
  <div class="absolute">
    <h1 style="margin-left : 200px">beaucoup de texte</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    </p>
  </div>
  <div class="relative">
    <h1>moins de texte</h1>
    hello and welcome
  </div>
</div>

另一种解释这个问题的方法是：

https://jsfiddle.net/jjjepmwm/5/

Answer 1

边界仅限于您最大的div。您的代码问题是您创建了一个绝对div，它不知道它的父级的界限。如果内容溢出，你可以隐藏内容。

Answer 2

绝对定位的元素从布局中取出。父div不会清除它绝对定位的子div。

您需要设置父div的高度，以便子div不会流出它。

.container {
  border: 2px solid green;
  padding: 20px;
  height:150px;
}
.absolute {
  position: absolute;
  color: #ff0000
}
.relative {
  position: relative;
}

<div id="card" class="container">
  <div class="absolute">
    <h1 style="margin-left : 200px">beaucoup de texte</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    </p>
  </div>
  <div class="relative">
    <h1>moins de texte</h1>
    hello and welcome
  </div>
</div>

Answer 3

使用position正确。 position: relative为嵌入式position: absolute

设置了计数开始

.parent {
  position: relative;

  background-color: red;
  width: 200px;
  height: 100px;
}
.child {
  position: absolute;
  left: 5px;
  top: 20px;

  background-color: blue;
  width: 50px;
  height: 20px;
}

<div class="parent">
  <div class="child"></div>
</div>