Tell me about the 'position' property in CSS: what are the possible values and how do they work?

The position property in CSS defines how an element is positioned on the page. Main values:

• static (default): the element is positioned in the normal document flow, and properties like top, left, etc., are ignored.
• relative: the element is positioned relative to its normal position; it can be moved using top, left, but still occupies space in the flow.
• absolute: the element is positioned relative to the nearest positioned ancestor (relative, absolute, fixed), or relative to the viewport if none exists; it is taken out of the normal flow.
• 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: the element behaves like relative until it reaches a specified position during scrolling, then it becomes fixed.

Example:

.box {
  position: absolute;
  top: 20px;
  left: 30px;
}

This block will be offset by 20px down and 30px to the right relative to the nearest positioned ancestor.