CSS Fixed Positioning : Just 10 Points

1) The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

2)A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

3)The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

4) Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport

5)A fixed element does not leave a gap in the page where it would normally have been located.

6) Example:

1. .positionFixed {
2. position:fixed;
3. top:0px;
4. left:500px;
5. }

Increase the height of the body using Body’s height attribute like height:1500px; and see the effect of fixed.

7)Position and dimensions of an element with position:fixed are always relative to the initial containing block

8)One of the most common uses of fixed positioning is to build a fixed header, or footer, anchored to one side of a page.

9) For long pages with high content, its useful to fix the navigation menu on the top of the page.

10)Browser support is still susceptable or unreliable.Internet Explorer versions 6 and older do not support fixed positioning at all.