FlexBox - 绝对位置的行为类似于固定

Question

FlexBox - 绝对位置的行为类似于固定

jas*_*son 1 html css css-position flexbox

我有一个非常基本的任务，看起来应该很容易使用任何实际上有意义的 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

sol*_*sol 5

来自MDN：

绝对定位元素是计算位置值是绝对或固定的元素。top、right、bottom 和 left 属性指定距元素包含块边缘的偏移量。（包含块是元素相对于其定位的祖先。）如果元素有边距，则将它们添加到偏移量中。

您需要添加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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，6 月前
查看次数：	872 次
最近记录：	7 年，6 月前