How may I understand positioning in CSS?

Answer 1

There are five possible values:

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

Static:This is the default. It is positioned according to the normal flow of the page.

Relative: This just means 'relative' to its normal position. If you do "position:relative;right:5px", the element will be positioned 5 pixels to the right.

Fixed: This will fix the element somewhere on the view-port (the screen). A navigation bar, for example, will likely be 'fixed' to the top,

Absolute: This will position the element relative to its parent element. so if you have a blue box in a red box, and the blue box has "position:absolute;left:0", the blue box will be positioned at the left side of the red box (0 pixels away from the edge).

Sticky: The element will change on scroll. While the parent element is in view, the sticky element will behave like a 'relative' element. Once the parent element is off screen, the sticky element will behave like a fixed element.

I hope this helps!