CSS - 绝对位置和文档流答案

【问题标题】：CSS - position absolute & document flowCSS - 绝对位置和文档流
【发布时间】：2011-06-27 22:39:38
【问题描述】：

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

例子：

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

【问题讨论】：

h2 { margin-top: 400px } 有什么问题吗？我认为您的示例可能有点做作；您需要让我们更好地了解您想要做什么。

标签： css position positioning absolute

【解决方案1】：

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

PS：position:block 不存在。仅限 absolute、relative、static 和 fixed。

【讨论】：

【解决方案2】：

对于 h2：

指定与图片高度相等的上边距。

例如。

img {
    position: absolute;
    top: 0;
}

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

【讨论】：

【解决方案3】：

简单，只需删除绝对位置。（已测试）如果一个对象没有被定义，它会自动移动到它的邻居的右边或下面

【讨论】：

【解决方案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>

【讨论】：