What are the options for positioning elements on a page (CSS position)?

In CSS, the position property determines how an element is positioned on the page. The main options are:

• static — the default value, the element is positioned in the normal document flow.
• relative — the element is positioned relative to its normal position; it can be moved using top, left, etc., while the space under the element is preserved.
• absolute — the element is positioned relative to the nearest positioned ancestor other than static; it is removed from the normal flow.
• fixed — the element is fixed relative to the browser window and does not move when scrolling.
• sticky — a hybrid of relative and fixed; the element behaves as relative until a certain scroll threshold is reached, after which it becomes fixed.

Example:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}