html - 位置绝对底部 : Do not change flow of text

Question

是否可以使元素在其相对父级中绝对定位到底部，并保持其文本内容从上到下的流动？

这就是我所说的大致布局---

<div class="relative" style="padding-bottom: 2em;">
    <div style="position: absolute; bottom: 0;">Bottom! Can I have normal text flow, plz?</div>
    <div style="height: 10em;"></div>
</div> 

--- 这是 fiddle :https://jsfiddle.net/x507Ljyh/

此外，我对任何创造性的解决方案持开放态度，例如伪元素等。请不要更改标记中元素的顺序。

谢谢!

编辑

我知道，absolute 位置的元素“不占用空间”，这没关系 - 灰色 article 元素有宽大的 padding-bottom因为那个。

我只需要 h1 元素文本从上到下流动，就像普通元素那样。所以可怕的长标题“惰轮比 Screwdriver 更聪明，鞭绳比绳索更能为你服务”将最终出现在灰色 article 元素的底部(和，有时，它会溢出到底部)。

这对于花车来说是类似的问题:HTML float right element order

这有意义吗？

编辑2

Flexbox 解决了我的问题，感谢@RoToRa!但是，如果 absolute 元素的文本内容流可以以某种方式恢复正常，我仍然很感兴趣，所以我保留这个问题。

Answer 1

如果你只支持最新的浏览器，你可以使用 flexbox 布局，并更改元素的顺序:

article {
    display: flex;
    flex-direction: column;
}

article > h1 {
    order: 2;
}

article > blockquote {
    order: 1;
}

https://jsfiddle.net/8pqs49qf/