Search code examples
csspositionpositioningabsolute

CSS - position absolute & document flow

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)

Solution

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