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