Positioning in CSS

There are 5 positioning types in CSS:

• Static: This is the default position for all HTML elements. Elements with static positions are placed in the document flow according to their order in the HTML code.

• Relative: This position allows you to move an element around its normal part without affecting the rest of the document flow. You can use the top, right, bottom, and left properties to move the element around.

• Absolute: This position removes an element from the document flow and positions it absolutely relative to its nearest positioned ancestor. You can use the top, right, bottom, and left properties to position the element anywhere on the page.

• Fixed: This position also removes an element from the document flow but positions it absolutely relative to the viewport. This means the element will stay in the same place even if the user scrolls the page.

• Sticky: This position is a combination of relative and fixed. An element with a sticky position starts out positioned relatively, but when the user scrolls past a certain point, it "sticks" to the top of the viewport.