CSS - absolute position and document flow

Question

Yes, I know that it does not work with the absolute position, but is there a way to display the elements "below" (after the 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 any way to display h2 under the image, except that it is too positioned?

Example:

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

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

Answer 1

The only way I could accomplish what you are asking is to set the property top h2, as well as positioning the text after the image. Fiddle

PS: position:blockdoes not exist. Only absolute, relative, staticand fixed.

Answer 2

h2:

, .

.

img {
    position: absolute;
    top: 0;
}

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

Answer 3

Simple, just remove the position absolute. (Verified) If an object is not defined, it automatically moves to the right of its neighbor or lower

Answer 4

How to wrap image and title in absolute block? This solution puts a title after the image because h2 is the default block and your content is still absolutely positioned.

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