将挠曲和绝对定位相结合时的混乱

Question

我有一个应用程序，本质上是一个标题，主要内容，和页脚，始终是可见的。页脚可以更改大小，并且有一些工具我想放在页脚上方的主内容面板上。主要布局是使用flex完成的，而我对文档的理解是绝对定位通过相对于最近的后代的位置与flex布局相结合，但这似乎不是我的经验。希望有人能帮我。

在下面的代码示例中，我希望看到位于页脚上方的“底部”div，但它实际上位于窗口的底部。以下是jsfiddle链接：http://jsfiddle.net/L809zbey/

HTML：

<div class="flex">
    <div class="header">Sweet header</div>
    <div class="content">Main content
        <div class="bottom">
          This guy should be fixed above the footer.
        </div>
    </div>

    <div class="footer">Equally sweet footer</div>
</div>

CSS：

.flex{
    border: 1px solid #ddd;
    font: 14px Arial;
    display: flex;
    flex-direction: column;
}

.header{
  background : #007AA2;
  flex: 0 0 auto;
}

.content{
  background : #FFF;
  flex: 1 1 auto;
  height: 200px;
}

.footer{
  background : #7FCADE;
  flex: 0 0 auto;
}

.bottom {
  position: absolute;
  bottom: 20px;
}

Answer 1

尝试将position:relative;添加到.flex类中。.bottom元素当前相对于主体，因此它被粘在页面底部。

Answer 2

您需要将position: relative;添加到.flex中。绝对定位的东西将相对于最近的定位祖先定位。如果没有，它将相对于身体。

Answer 3

--您不需要将元素绝对定位为...just--确保它始终位于.content div的底部。这样，它将永远不会覆盖任何实际的内容，如果它有绝对的位置，它将这样做。

您可以通过将.content div设置为flex列并将margin-top:auto应用于您的工具div来实现这一点。

​

.flex {
  border: 1px solid #ddd;
  font: 14px Arial;
  display: flex;
  flex-direction: column;
}

.header {
  background: #007AA2;
  flex: 0 0 auto;
}

.content {
  background: pink;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 200px;
}

.footer {
  background: #7FCADE;
  flex: 0 0 auto;
}

.bottom {
  margin-top: auto;
  background: orange;
}

<div class="flex">
  <div class="header">Sweet header</div>
  <div class="content">Main content
    <div class="bottom">
      This guy should be fixed above the footer.
    </div>
  </div>

  <div class="footer">Equally sweet footer</div>
</div>

​