Layering html with absolute positions in fluid html

Absolute positioning style=”position:absolute” provides a method to overlay html content. This allows for richer layouts and animations. Absolute positioned content appears above the content (by default – controlled by z-index) and additional content after the position absolute appears as if it were a background or as if the absolute positioned content were not taking any space.

Absolute positioning requires advanced CSS knowledge. One must know the difference between a style=”display:block” and style=”display:inline”. If a block element is used the content under the absolute content will be blocked. This is the most common error – if you see a link that you can not click on, it is a fairly safe bet that the coder made this error … z-index can and should be used on those background links to bring them above the “position absolute” content. Any number of layers can be created and work if one uses the z-index style correctly. Each layer can be independently animated.

Most tutorials on absolute positioning point out that the style=”top:” and style=”left:” control the location of the content and it is based on the document parent or the top left location of the browser window. They fail to point out that if a style=”position:relative” is used in a block element that the absolute content location will be based on that parent instead.

The trick to using absolute positions in a fluid html layout is to place the content into a relative positioned parent block. This same method applies to centered 960 pixel layouts – because the left margin is no longer left:0px. See an example at with the icons on the right collapsing sidebar with in inside the 960 pixel layout.


One response

  1. Hey there! This is the second time visiting now and I personally just wanted to say I truley relish looking through your weblog.
    I decided to bookmark it at with the title: Layering html with absolute positions
    in fluid html Wsmith Web Development, Design and Marketing and
    your Domain name: http://wsmithdesign.wordpress.


    I hope this is alright with you, I’m making an attempt to give your great blog a bit more visibility. Be back soon.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: