What are the different types of CSS positioning?

What are the different types of CSS positioning?

There are four main types of CSS positioning: static, relative, absolute, and fixed. Would you like to know more about each?

Yes, please explain each type.

Sure! Static positioning is the default; elements are positioned according to the normal flow. Relative positioning moves an element relative to its original position. Absolute positioning removes the element from the flow and positions it relative to its nearest positioned ancestor. Fixed positioning keeps the element in a fixed position relative to the viewport.

What about sticky positioning?

Sticky positioning is a hybrid of relative and fixed. An element with sticky positioning toggles between relative and fixed, depending on the scroll position.

Can you give me an example of each type?

Absolutely! For static, just a regular div. For relative, you might use 'top: 10px'. For absolute, you could position a tooltip with 'position: absolute; top: 50px;'. For fixed, a header that stays at the top with 'position: fixed; top: 0;'. And for sticky, a section that sticks when you scroll past it.