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

Question

我有 100% 宽度的三个部分；

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

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

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

我也不在寻求 JavaScript 解决方案。

score 2 · Accepted Answer

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

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

1 回答 1