Question

我有一些不可更改的HTML格式：https://jsfiddle.net/1ajkwdx3/1/

#foo {
  position: absolute;
  top: 40px;
}

#bar {
  position: absolute;
  top: 10px;
}

<body>
  <div id="foo">
    foo
  </div>
  <div id="bar">
    bar
    </bar>
</body>

div目前处于绝对位置，#foo的CSS top值高于#bar。因此，他们的顺序是相反的。

是否可以（仅使用CSS）保持此逆序，但#foo下#bar自然流动，以便调整为#bar中的大内容（不更改HTML））？

Answer 1

你可以通过flex实现它。

＆＃13;

body {
  display: flex;
  flex-direction: column-reverse;
}

#bar {
  width: 50px;
}

#foo {
  color: red;
}

＆＃13;

<body>
  <div id="foo">
    foo
  </div>
  <div id="bar">
    barasdf ads fasdf asdf asdf asdf
  </div>
</body>

＆＃13;

Answer 2

您可以使用Flexbox，但对IE的支持较差。您可以使用box-ordinal-group来控制每个元素的特定显示顺序，其方式与z-index控制堆栈顺序的方式类似。

<强> HTML：

<div id="container">
   <div id="foo">
      foo
   </div>
   <div id="bar">
      bar
   </div>
</div>

<强> CSS：

#container {
   display: -webkit-box;
   display: -moz-box;
   display: box;
   -webkit-box-orient: vertical;
   -moz-box-orient: vertical;
   box-orient: vertical;
}

#foo {
   -webkit-box-ordinal-group: 2;
   -moz-box-ordinal-group: 2;
   box-ordinal-group: 2;
}

#bar {
   -webkit-box-ordinal-group: 1;
   -moz-box-ordinal-group: 1;
   box-ordinal-group: 1;
}

请参阅JSFiddle example。

如何在以后使用CSS的内容之后制作更早的内容流？

2 个答案: