Thursday, September 23, 2010

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:static;

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.
More about CSS Positioning


cheers!!
Joginder Poswal

No comments: