Positioning Properties in CSS 3.0

To mainupulate the location of element on the page we can use diffrent CSS properties as per need.

There are 5 diffrent properties to align elements:

1-Static (Default)

2-Absolute

3-Relative

4-Fixed

5-Stickey

Explaination:

Static: This is the deafult element position, the right,left/top,bottom properties will not work in static position.

Absoulute: It change the element position with page view port, (from the very start of page), diffrent properties (left,right,top,bottom) can be applied.

Relative: It change element position with respect to it’s relative element not from page-view port. You can apply diffrent properties to align element w.r.t it’s neighbour.

Fixed: As name describe, the fixed property is used to make an element fix at a place even if page is scrolled, the basic property position can be used as well.

Sticky: It’s based on custom scroll,It is positioned relative until a given offset position is met in the viewport — then it “sticks” in place (like position:fixed).