CSS - position absolute & document flow

Question

Yes, I know doesn't work with position absolute, but is there a way to display elements "below" (after in code) not behind them?

Example:

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

Is there a way of displaying the h2 below the image excepting positioning it absolutely too?

Example:

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

(yes, I have to use absolute in my case, and dynamic margined content below, and I'm lost :D)

Answer 1

The only way I was able to do what you are asking is setting the top property of h2, aka positioning the text after the image. Fiddle.

PS: position:block doesn't exist. Only absolute, relative, static, and fixed.

Answer 2

For h2:

specify a top margin equal to the height of your image.

eg.

img {
    position: absolute;
    top: 0;
}

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

Answer 3

Simple , just remove position absolute . (tested) If an object is not defined it will automatically go to the right of its neighbour or below

Answer 4

How about wrapping the image and the title in an absolute block? This solution puts the title after the image because h2 is a block by default and your content is still absolutely positionned.

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