CSS - position absolute & document flow

Yes, I know doesn't work with position absolute, but is there a way to display elem开发者_StackOverflow社区ents "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)

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.

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

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

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>