What is the position property in CSS? What values does it have (static, relative, absolute, fixed, sticky) and how do they work?

The position property in CSS defines how an element is positioned on the page and affects how it interacts with other elements.

Main position values:

• static — the default value. The element is positioned in the normal document flow, and top, left, bottom, right properties do not apply.

• relative — the element is positioned relative to its normal position. You can offset the element using top, left, bottom, right, while it still occupies its original space in the flow.

• absolute — the element is positioned relative to the nearest ancestor with a position other than static (if none, relative to the browser window). The element is taken out of the normal flow, does not occupy space, and is offset using top, left, bottom, right.

• fixed — the element is fixed relative to the browser window and does not move when scrolling. It is also taken out of the flow.

• sticky — a hybrid of relative and fixed. The element behaves as relative until it reaches a specified scroll threshold (e.g., top: 0), after which it becomes fixed.

Example of usage:

.element {
  position: sticky;
  top: 0;
  background: white;
}

This element will stick to the top of the window when scrolling.