Learn CSS Positioning

The CSS positioning properties allows you to position an element, lets you control how and where a Web browser displays particular elements. This is one of the most confusing concepts in CSS. I can help you understand how positioning works. position:static and position:relative can be both display:block and display:inline, while position:absolute and position:fixed  will always be displayed as block elements.

There are four basic ways to position an element. Static, relative, absolute, and fixed. static is the default value; for any other value you have to apply a CSS declaration.

Position:static– the way it normally works.

Static positioning is the browser default, and it’s the most common form of positioning. An element with position: static always has the position the normal flow of the page gives it. (Ignores any top, bottom, left, or right declarations). Usually you wouldn’t specify this unless you needed to override a positioning that had been earlier set.

Position:absolute– stick the content wherever.

Positioning an element absolutely, removes the element from the normal flow. Absolute positioning is exactly what it says, absolute. Absolute positioning is a good way to take content and place it somewhere that has no relationship to the content around it. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties.

Position: Relative — will be placed offset in relation to its normal position

A relatively positioned element is placed relative to its current position in the X(HTML) flow. you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. This technique is useful for controlling the way elements appear in relation to other elements in the window.
Position: relative;

Position: Fix — will fix it on the background of the page, where it will not move when the user scrolls.

Fixed positioning is a subcategory of absolute positioning. When anyone scrolls the page, fixed elements remain onscreen as paragraphs and headlines, while photos disappear off the top of the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. (Internet Explorer doesn’t support this CSS property)
position: fixed;

Joginder Poswal

Tags: ,

This entry was posted on Sunday, May 10th, 2009 at 1:40 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

This blog is kept spam free by WP-SpamFree.


Get Adobe Flash player