向下浮动

Question

我正在尝试使用CSS从上面的代码中进一步编写代码。

基本上我的HTML是这样的：

<div class="showbelow">
show below
</div>

<div class="showabove">
show above
</div>

我希望showabove div显示在showbelow div之上尽管​​在html中低于它。有没有办法在CSS中使用而不使用负边距？例如。给showabove一个负的上边距并显示低于正的上边距？两个div都是容器的100％。

提前致谢：）

Answer 1

有一个属性order可以使用flexbox将项目放置在特定位置。

请参阅以下示例：

.container {
  display:flex;
  flex-direction:column;
}
.container div {
  border:1px solid red;
}
.showabove {
  order:1;
}
.showbelow {
  order:2;
}

<div class="container">
  <div class="showbelow">show below</div>
  <div class="showabove">show above</div>
</div>

  

默认情况下，Flex项目的显示和排列顺序与它们在源文档中显示的顺序相同。订单属性可用于更改此排序   https://drafts.csswg.org/css-flexbox-1/#order-property

使用order:-1时要小心！

.container {
  display:flex;
  flex-direction:column;
}
.container div {
  border:1px solid red;
}
.showabove {
  order:-1;
}

<div class="container">
  <div class="showbelow">show below</div>
  <div class="showmiddle">show middle</div>
  <div class="showabove">show above</div>
</div>

说明：order:-1设置容器第一个位置的项目，因为所有其他项目都默认为order:0。它不会在前一项之前移动项目！在您的情况下，此解决方案正在运行，但如果您添加更多项目可能会出现问题，您必须为容器上的每个项目设置order，如上例所示。

Answer 2

使用Flexbox，您可以更改元素的顺序。因此，在这种情况下，您可以在order: -1 div。

上使用.showabove

body {
  display: flex;
  flex-direction: column;
}
.showabove {
  order: -1;
}

<div class="showbelow">show below</div>
<div class="showabove">show above</div>