使用CSS/HTML将一个元素移动到另一个元素之前

Question

有没有可能只使用CSS/HTML，而不改变标记顺序，就将一个完整宽度的元素移动到另一个元素下方，使其看起来在上方？

<div id="first">first</div>
<div id="second">second</div>

#first {…}
#second {…}

期望结果：

第二个
第一个

- Daniel Åsberg

Answer 1

你可以使用CSS 弹性盒子来实现。具体来说是使用order属性。

在这个例子中，我添加了宽度和背景颜色来帮助可视化。请注意，CSS弹性盒子的浏览器支持仅限于现代浏览器，如IE 10+，Chrome 21+，Firefox 20+，并且可能在移动浏览器中不起作用（特别是旧版）。

.container {
  display: flex;
  flex-direction: column;
}

#first {
  order: 2;
  
  width: 10em;
  margin-top: 1em;
  background-color: orange;
}
#second {
  order: 1;
  
  width: 10em;
  background-color: yellow;
}

<div class='container'>
  <div id=first>
    first
  </div>
  <div id=second>
    second
  </div>
</div>

- rink.attendant.6

---

我曾经担心Flexbox会是答案，因为我还得支持一些老旧的浏览器。 - Daniel Åsberg

Flexbox肯定是最灵活的选择，但正如其他答案所建议的那样，如果块的高度事先已知，则还有其他方法可以实现此目的。 - rink.attendant.6

我同意。这可能是一年内的正确答案。但对于我现在来说，我会选择另一个答案，因为我已经知道其中一个元素的高度。 - Daniel Åsberg

Answer 2

只有当您知道第二个元素的确切高度时才能这样做：

#first {
    margin-top: 20px;
}

#second {
    top: 0;
    position: absolute;
}

http://jsfiddle.net/9zmcnedy/

- monkeyinsight

---

哇，这太容易了。我实际上已经有一个元素的高度了。所以我想这对我来说是正确的答案。 - Daniel Åsberg

不确定它是否适用于不同大小的 div 的通用解决方案。 - Intacto

Answer 3

Js Fiddle

类似这样的内容

#first { position:relative; top:18px}
#second {position:relative; bottom:18px}

- Vitorino fernandes

Answer 4

可以通过使用position: absolute来解决问题，但这样做的缺点是父元素不会随着子容器（第一个元素）高度的增加而拉伸高度。（要解决这个问题，您应该使用javascript）

CSS

.container {
    border: 1px solid green;
    display: inline-block;
    position: relative;
}
#first {
    position: absolute;
    top: 100%;
}

工作的Fiddle

- Mr_Green

Answer 5

这是一个很老的问题，但是我需要它并且偶然发现了这个简单的解决方案。

将这两列放在一个 div 中，并设置 div 的样式为：

display: flex;

flex-direction: column-reverse;

例如：

.container {
  display: flex;
  flex-direction: column-reverse;
}

<div class="container">
  <div>first</div>
  <div>second</div>
</div>

- Phyln