CSS Positioning

In CSS Positioning of elements is very important topic. CSS having five type of Positioning method

1. static
2. relative
3. fixid
4. absolute
5. sticky

Static

1. default form of HTML
2. Do not have any specific styling
3. We can not use top, bottom, left, right with static positioning

relative

1. Give affect relative to its normal position.
2. Normally No element can occupy its position.

Fixed

1. give affect relative to view port.
2. It always occupy the same place unless page is scroll.
3. top, bottom, left, right can be used with it
4. Normally other element occupy blank space which it left

Absolute

1. relative to the nearest positioned ancestor(instead of positioned relative to the viewport, like fixed).
2. It move along the scroll
3. if there are no ancestor exits it used document body
4. space left by element is fulfilled by another element.

Sticky

1. position based on the scroll
2. element toggle between relative and fixed
3. Element perform like relative property until viewport does not match then perform as fixed

All the positioning property is applied as:

.className or #Id or tag {
positon: ProperyName; fixed);
}
PropertyName: static OR relative OR absolute OR sticky

Thanks for Reading...

By Tech 9-on