没有绝对定位的CSS重新定位部分

Question

我有三个部分都是100％宽度;

<section>
    <h1>section 1</h1>
</section>
<section>
    <h1>section 2</h1>
</section>
<section>
    <h1>section 3</h1>
</section>

它们按此顺序排列，因为页面正确读取。但是，出于演示目的，我希望最后一部分位于顶部并推动其他两部分。

我知道我可以绝对定位，然后相应的其他部分，但我想知道是否有更好的解决方案，这将允许其他两个部分被最后一节中的内容推下。

在JavaScript解决方案之后，我也不。

Answer 1

不，如果不更改HTML或使用绝对定位，就无法做到这一点。您已经将文档流设置为某种方式（通过以某种方式放置HTML），因此您可以在不更改HTML的情况下更改该流的唯一方法是使用一个指令来取出该元素。正常的文档流程（只有两个是absolute和fixed）。

除了这两个选项之外，你唯一剩下的就是JavaScript，但即使这样，它也会重新排序HTML（将你的最后一个放在第一位）。这可以工作，只要您希望通过按照您的顺序放置支持的用户代理不使用JavaScript。