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>

有没有办法在下面显示图像除了绝对定位它？

示例：

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

（是的，我在我的情况下使用绝对值，以及下面的动态保证金内容，而我丢失：D）

Answer 1

我能够做你要求的唯一方法是设置top的{{1}}属性，也就是将图像定位在图像之后。 Fiddle.

PS：h2不存在。仅限position:block，absolute，relative和static。

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>

CSS - 绝对位置＆amp;文件流程

4 个答案: