将一个子<div>放在固定定位的父<div>

Question

所以我试图用HTML / CSS构建一个模态窗口（带有白色背景），我希望模态窗口本身相对于浏览器窗口固定。此外，模态在顶部包含一个子img，在底部包含一个子div，其中包含一些描述文本。我的目的是将子div相对于父固定模态窗口定位，以便子div的左偏移量约为父级宽度的8.33％。

所以最初我认为我应该绝对定位子div，但是一旦我这样做，父模态窗口的背景不会延伸到子div：

这是上面的html / css： HTML：

<div class="modal col-4 l-offset-4" id="robot-modal">
    <img src="media/robot_modal.jpg">
    <div class="col-10 l-offset-1">
    </div>
</div>

的CSS：

.col-10 {
  width: 83.33333%;
}

.l-offset-1 {
  left: 8.33333%;
}
.modal {
  @include align-vertically(fixed);
  display: none;
  z-index: 2000;
  background: white;
  img {
    width: 100%;
  }
  div{
    position: absolute;
    background-color: blue;
    height: 100px;
  }
}

但是当我将儿童div的位置更改为“亲戚”时，会显示正确的背景：

我没有直觉，为什么我应该总是将一个元素相对定位在一个固定的父元素中。不会将元素定位为相对因素而无法相对于其父元素调整偏移量？根据这篇文章：http://www.webdevdoor.com/html-css/css-position-child-div-parent，如果我们想要相对于其直接父元素定位元素，则父元素最好是绝对或相对定位，并且子元素必须是绝对定位的。所以在我的情况下，为什么调整相对定位的孩子的偏移也有效？我不想为父模态指定高度。我想让它在包含新元素时自动扩大。

Answer 1

父母没有考虑绝对孩子的大小。根据{{​​3}}：

  

绝对：不要为元素留空间。相反，将其定位在相对于其最近定位的祖先或包含块

的指定位置

如果你把一些东西放在绝对元素之后，它会在顶部，因为绝对元素不再在文档流中。

您可以执行position: relative; left: 8.33%; right: 8.33%，或者只使用margin: 0 8.33%;将其保留为静态，或者如果您执行绝对操作，则可以设置.modal { margin-bottom: [height of absolute DIV] }，如果高度已设置且不会更改