将子 <div> 定位在固定定位的父 <div> 内答案

【问题标题】：position a child <div> inside a fixed positioned parent <div>将子 <div> 定位在固定定位的父 <div> 内
【发布时间】：2016-05-21 12:20:15
【问题描述】：

所以我正在尝试使用 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，如果我们想要相对于其直接父元素定位元素，则父元素最好是绝对定位或相对定位，而子元素必须是绝对定位。那么在我的情况下，为什么调整相对定位的孩子的偏移量也有效？我不想为父模态分配高度。我希望它在包含新元素时自动放大。

【问题讨论】：

不要绝对定位它 - 否则父级将不知道图像的尺寸是什么，因为您将其拉出正常的 DOM 流。相对于父级定位图像。 position:relative;margin:0 8.33%;
absolute 引用元素的父元素或最近的定位元素祖先。 relative 引用了它自己的原始位置，当 moved 元素 appears 移动但实际上，该元素仍然是最初移动的地方，而不是呈现。执行position 的常用方法是使用relative 作为父级并使用absolute 子级。

标签： html css

【解决方案1】：

父母不考虑绝对孩子的大小。根据MDN：

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

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

你可以做position: relative; left: 8.33%; right: 8.33%，或者用margin: 0 8.33%;把它保持为静态，或者如果你做绝对，你可以设置.modal { margin-bottom: [height of absolute DIV] }，如果高度已经设置并且不会改变。

【讨论】：