FlexBox - 绝对位置表现得像固定的答案

【问题标题】：FlexBox - absolute position behaves like fixedFlexBox - 绝对位置表现得像固定的
【发布时间】：2018-11-18 00:57:33
【问题描述】：

我有一个非常基本的任务，它似乎应该很容易使用任何类型的 GUI 标记语言来完成，实际上是有意义的。不幸的是，HTML/CSS 不是这样的标记语言。

在下面的示例中。我有一个在 CSS 中使用 flexbox 样式的“圣杯”页面布局。主要布局还可以……它甚至可以很好地滚动。但是当我将一个元素添加到具有绝对定位的主体（中心/金色区域）中时，特定元素的位置表现得好像是固定的，而不是绝对的。在下面的代码中，我将其设为 128x128 的 div 并将其着色为 #00ffff（青色）。理智的人会认为 div 会出现在主体区域（金色部分）的左上角......但是，flexbox 似乎将我的绝对定位视为固定位置。下面的代码就是演示这个问题所需要的全部内容。

我需要一个行为符合预期的解决方案。

<body>
  <header>
    <h1>FLEXBOX LAYOUT PROOF OF CONCEPT</h1>
  </header>
  <div class="layout__body">
    <main class="layout__content">
        <div id="absolutepositioned">MESSED UP</div>
        <div style="color: #00FFFF;"><b>the blue box should be here</b>    </div>
    </main>
    <nav class="layout__nav layout__columns">
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>
        NAV ITEMS<br>

    </nav>
    <aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE</aside>
  </div>
  <footer> FOOTER
  </footer>
</body>
<style>
  body {
    display: flex;
    flex-direction: column;
  }

  .layout__body {
    display: flex;
    flex: 1;
  }
  .layout__content {
    flex: 1;
    overflow: auto;
  }

  .layout__columns {
    flex: 0 0 12em;
  }
  .layout__nav {
    order: -1;
  }

  .layout__content {
    background: #3f3f00;
  }

  .layout__columns {
    background: green;
  }

  header, footer {
    background: #000;
    color: #fff;
    padding: 10px;
  }

  footer a {
    flex: 1;
  }

  h1 {
    margin: 0;
    font-size: 15px;
  }

  html,body {
    height: 100%;
    margin: 0;
    font-family: Helvetica;
  }

  #absolutepositioned
  {
      position: absolute;
      left: 0;
      top: 0;
      width: 128px;
      height: 128px;
      background-color: #00ffff;
  }
</style>

【问题讨论】：

尝试将position: relative 添加到.layout__content。
行得通！谢谢！发布为答案，我会接受。

标签： html css flexbox css-position

【解决方案1】：

From MDN:

绝对定位元素是指计算位置的元素值是绝对的或固定的。顶部、右侧、底部和左侧属性指定从元素包含的边缘的偏移量堵塞。 (包含块是相对于它的祖先元素被定位。）如果元素有边距，它们被添加到偏移量。

您需要将position: relative 添加到要定位元素的祖先，在您的情况下，即.layout__content

body {
  display: flex;
  flex-direction: column;
}

.layout__body {
  display: flex;
  flex: 1;
}

.layout__content {
  flex: 1;
  overflow: auto;
  position: relative;
}

.layout__columns {
  flex: 0 0 12em;
}

.layout__nav {
  order: -1;
}

.layout__content {
  background: #3f3f00;
  position: relative;
}

.layout__columns {
  background: green;
}

header,
footer {
  background: #000;
  color: #fff;
  padding: 10px;
}

footer a {
  flex: 1;
}

h1 {
  margin: 0;
  font-size: 15px;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: Helvetica;
}

#absolutepositioned {
  position: absolute;
  left: 0;
  top: 0;
  width: 128px;
  height: 128px;
  background-color: #00ffff;
}

<header>
  <h1>FLEXBOX LAYOUT PROOF OF CONCEPT</h1>
</header>
<div class="layout__body">
  <main class="layout__content">
    <div id="absolutepositioned">FIXED!</div>
    <div style="color: #00FFFF;"><b>the blue box should be here</b> </div>
  </main>
  <nav class="layout__nav layout__columns">
    NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br> NAV ITEMS<br>

  </nav>
  <aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE</aside>
</div>
<footer> FOOTER
</footer>

【讨论】：

我接受这个答案......但我也想声明，记录在案......这毫无意义！我的 div 在另一个 div 里面......因此 ABSOLUTE 应该可以工作（但不能）。必须将位置设置为相对，这绝对没有意义。难怪每个人都讨厌 CSS。