Question

如果是的话，如何通过纯CSS 显示后者编码在顶部没有绝对定位（没有js和像is6这样的古老浏览器不是我关心的）？

我需要3个主要部分

菜单（顶部可见，但左侧或左侧和右侧后编码）
left（首先编码（最顶层）导致它成为我文章存在的地方）
对（次要事情）

很抱歉，我无法尝试任何原因，因为我不知道如果存在无绝对定位解决方案。

有人可能会说＆＃34; abs定位有什么问题？＆＃34; abs定位没有问题，但我只是想学习。

谢谢，最好的问候

Answer 1

如果您的目标浏览器支持使用Flexbox，您可以轻松更改元素的排序http://caniuse.com/#search=flexbox：

.container {
  display: flex;
  /* Flexbox defaults to a row layout, so we set it to column so the .content and .menu elements stack. */
  flex-direction: column;
}

.content {
  display: flex;
  /* Distribute elements inside .content with respect to their space between the elements */
  justify-content: space-between;
}

.menu {
  /* Forces the elements ordering to the top */
  order: -1;
  width: 100%;
  height: 80px;
  background: #dedede;
}

.left,
.right {
  width: 100px;
  height: 300px;
  background: #aeaeae;
}

<div class="container">
  <div class="content">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  <div class="menu">
    Menu
  </div>
</div>

layout - 在没有绝对定位的情况下显示后面的编码div

1 个答案: