Question

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

在下面的示例中。我有一个“圣杯”页面布局，在CSS中使用flexbox样式。主要布局还可以......它甚至滚动得很好。但是当我使用绝对定位向主体（中心/黄金区域）添加元素时，特定元素的位置表现为 - 如果是固定的，而不是绝对的。在下面的代码中，我将它设为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：

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

您需要将long long添加到要根据您的情况定位元素的祖先position: relative

＆＃13;

.layout__content

＆＃13;

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

＆＃13;

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

1 个答案: