FlexBox

Question

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

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

我需要一个按预期运行的解决方案。

<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>

Answer 1

From MDN:

An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.

您需要将 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>

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

FlexBox - absolute position behaves like fixed

html

css

css-position