Position

position property sets how an element is positioned in the document.

Basic Concepts

A positioned element is an element whose position value is set to relative, absolute, sticky, or fixed. (The default value is static.)

With positioned elements, you can tweak their final location using top, right, bottom, and left properties.

Position Property

position

Sets how an element is positioned in the document. Possible values:

• static — The element is positioned according to the normal document flow (default)
• relative — The element is positioned according to the normal document flow, and then offset relative to its original position according to the values of top, right, bottom, left.
• absolute — The element is taken out from the normal document flow (no longer takes space in its original spot), and positioned relative to the nearest positioned ancestor. The final position is set according to the values of top, right, bottom, left.
• fixed — The element is taken out from the normal document flow (no longer takes space in its original spot), and positioned relative to the viewport. The final position is set according to the values of top, right, bottom, left.
• sticky — The element is positioned according to the normal document flow, and then offset relative to the nearest "scrolling block-level ancestor" according to the values of top, right, bottom, left. (For example, if you set top: 100px, it ensures that the element would stay at least 10px from the top of the scrolling container; if it would go below that, the element will "stick" at the top 10px of the scrolling container while the other content will continue scrolling.)

Positioning Properties

top

Sets the final position of a positioned element. (See position to see how this is calculated.)

right

Sets the final position of a positioned element. (See position to see how this is calculated.)

bottom

Sets the final position of a positioned element. (See position to see how this is calculated.)

left

Sets the final position of a positioned element. (See position to see how this is calculated.)

Inset Properties

inset

Shorthand for top, right, bottom, and left (remember: clockwise direction).

If you specify less than 4 lengths, the missing lengths would be inferred from the lengths that you specified (it will try to make symmetrical inset).

<div id="inset-example">
  <p>Example text</p>
</div>

#inset-example {
  color: white;
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: red;
  position: relative;
}
#inset-example p {
  writing-mode: vertical-rl;
  background-color: orange;
  inset: 10px 50px 20px;
  position: absolute;
}

inset-inline-start

Sets the inset at the start of "inline" direction. (If you're writing horizontally from left to right, then it maps to left.)

inset-inline-end

Sets the inset at the end of "inline" direction. (If you're writing horizontally from left to right, then it maps to right.)

inset-inline

Shorthand for inset-inline-start and inset-inline-end.

p {
  inset-inline: <inset-inline-start> <inset-inline-end>;
  inset-inline: <inset-inline-start>;
}

inset-block-start

Sets the inset at the start of "block" direction. (If you're writing horizontally from left to right, then top to bottom, then it maps to top.)

inset-block-end

Sets the inset at the end of "block" direction. (If you're writing horizontally from left to right, then top to bottom, then it maps to bottom.)

inset-block

Shorthand for inset-block-start and inset-block-end.

See Also

• Layout and the containing block (MDN) — Describes how positioning of positioned elements works. — https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

References

• position (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/position
• inset (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/inset