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:

Answer 1

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 2

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>

Answer 3

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 4

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