html - 结合 flex 和绝对定位时的混淆

标签 html css flexbox

我有一个应用程序,它本质上是一个页眉、主要内容和一个始终可见的页脚。页脚可以改变大小,我想在页脚上方的主内容面板上放置一些工具。主要布局是用 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;
}

最佳答案

尝试添加 position:relative;给您的 .flex类(class)。 .bottom元素当前是相对于正文的,因此为什么它被卡在页面底部。

关于html - 结合 flex 和绝对定位时的混淆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53751065/

相关文章:

html - 在 Flexbox 中将元素置于两个兄弟元素之间居中

html - 将元素底部对齐,同时在 flexbox 中保持拉伸(stretch)

jquery - 如何使用 jQuery 更改按钮的文本?

jquery - Flexisel 强制 <li> 到一行,不显示 :inline-block or whites-space:nowrap

css - 我想在带有 Bootstrap 的浏览器上将标题显示为 100% 宽度

css - 如何在使用 Bootstrap 4 和 Flex 制作的笛卡尔平面中拉伸(stretch)网格项?

css - 用于按行和列灵活调整单元格大小的 HTML/CSS/JavaScript 方法

javascript if语句返回值

html - 试图让图片 float 在文字的右边

javascript - 如何在不干扰上方内容的情况下将固定高度的 <div> 锚定到 <td> 的右下角?