CSS Position

CSS position property is quite tricky to understand, but if practice with each of the CSS position values it can be easily understood and will help in writing codes for some of the components like pop-up, message snack bar or toast.

position property in CSS has five values,

1. static ( default value if not position value specified )
2. relative
3. absolute
4. fixed
5. sticky

position property works with properties ( top, left, right, bottom, z-index ). Based on these values an element gets positioned in the HTML document.

Static:

Default value property position property,

Has no impact on the regular flow of the HTML codes, positions the elements in the order which is written in HTML.

Here, top, left, right, bottom & z-index values has no effect.

1. Goes with the normal flow of the document
2. Occupies its own space in the document
3. Values for top, right, bottom, left & z-index has not effect
4. Affected by scrolling

Static Positioned Element

Relative:

Moves/Positions the element based the value provided for the top, left, bottom, right relative to its initial position.

1. Goes with the normal flow of the document
2. Occupies its own space in the document
3. Affected by top, right, bottom, left values with respect to its position initial position also will overlap other elements if intercepted
4. Affected by scrolling

Relative Position

Absolute:

Element will float above the normal flow of the document. Positioned based on the top, left, right, bottom values relative to the HTML/non-static ancestor.

Z-index value decides which element should float over the other among the absolute positioned elements.

1. Removed from the normal flow of the document and made to appear float over normal flow of the document
2. No Space is occupied in the in the normal flow of the document or page layout
3. When **no** top, right … props are specified it stays in 0px top respective to its initial position
4. Affected by top, right, bottom, left values with respective to initial
   containing block (html tag) ** provided none of its parents/ancestors has non static position value**
   ** When some of its parents has non static position value then it moves with respective to the closest non static positioned parent **
5. Affected by scrolling

Absolute Position

Fixed:

Element is fixed on the document by the values of top, left, right, bottom. Not affected by scrolling.

1. Removed from the normal flow of the document and made to appear float over normal flow of the document
2. No Space is occupied in the page layout
3. Affected by top, right, bottom, left values with respective to initial containing block (html tag)
4. Not Affected by scrolling

Fixed Position

Sticky:

Similar to fixed, but the only difference unless the top, left, right, bottom values reached on scroll it won’t move. Once it reaches the values it gets stuck in the position values.

1. Goes with the normal flow of the document
2. Occupies its own space in the document
3. Affected by top, right, bottom, left values with respective to initial containing block (html tag)
4. affected by top, left, … values until the values are reached else not affected by scroll

Sticky Position

z-index:
z-index is like floor value which decides what element should appear above other elements

Hope You got to know more about CSS positioning. Thank You.