css - 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

我能够做到您所要求的唯一方法是设置 的top属性h2，也就是将文本定位在图像之后。小提琴。

PS：position:block不存在。只有absolute, relative,static和fixed。

Answer 2

对于 h2：

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

例如。

img {
    position: absolute;
    top: 0;
}

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

Answer 3

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

Answer 4

将图像和标题包装在绝对块中怎么样？此解决方案将标题放在图像之后，因为默认情况下 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>