CSS - 绝对位置和位置文件流

Question

是的，我知道不适用于绝对位置，但是有没有办法显示“下面”的元素（在代码中之后）而不是在它们后面？

示例：

<img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" /> 
<h2 style="padding: 15px" >This text is behind not below the image</h2>

有没有办法将 h2 显示在图像下方，除了将其绝对定位？

示例：

http://jsfiddle.net/fDGHU/1/

（是的，我有 在我的例子中使用绝对，以及下面的动态边距内容，我迷失了：D）

Answer 1

很简单，去掉绝对位置即可。 （已测试）
如果未定义对象，它将自动转到其邻居的右侧或下方

Answer 2

将图像和标题包装在绝对块中怎么样？此解决方案将标题放在图像后面，因为默认情况下 h2 是一个块，并且您的内容仍然是绝对定位的。

<style type="text/css">
.wrapper{
    position: absolute;
    top: 0;
}
h2 {
    padding: 40px;
}
</style>

<div class="wrapper">
    <img src="image_url" alt="image!" />
    <h2>Am I invisible? (not!)</h2>
</div>

Answer 3

我能够执行您所要求的操作的唯一方法是设置 h2 的 top 属性，也就是将文本定位在图像之后。 Fiddle.

PS：position:block不存在。仅绝对、相对、静态和固定。

Answer 4

对于 h2：

指定等于图像高度的上边距。

例如。

img {
    position: absolute;
    top: 0;
}

h2 {
    margin-top: 400px;
    padding: 40px;
}