position

robgmerrill's avatar
Published Jul 14, 2021Updated Dec 23, 2023
Contribute to Docs

The position property defines how elements are placed within the document.

Syntax

position: <value>;

where <value> can be one of the following:

  • static: This is the default value of the position property. The element stays in the flow of the document and appears in the actual location where it’s located in the markup.
  • relative: The element does not change positions unless one or several properties of top, right, bottom, or left are declared. It also creates a reference position for absolute positioned child elements.
  • absolute: The element is removed from the document flow and it’s positioned in relation to its closest relative positioned ancestor element.
  • fixed: The element is removed from the document flow just like the absolute positioned elements. However, unlike the absolute positioned elements, which are relative to an ancestor element, the fixed elements are always relative to the document.
  • sticky: This value is a mix between the relative and fixed positions. The element is treated as relative until a specific point or threshold is met, at which point the element is then treated as fixed.

Example 1

The following example features three .box elements with different position values:

.box1 {
height: 100px;
width: 100px;
background-color: red;
position: sticky;
top: 30px;
}
.box2 {
height: 100px;
width: 100px;
background-color: blue;
position: fixed;
top: 80px;
}
.box3 {
height: 100px;
width: 100px;
background-color: green;
position: relative;
top: 80px;
}

Here’s what the above examples look like:

CSS Position Example

The first box is sticky to the top of the document. The second is set to a fixed position 40px from the top of the page. The third box position is 80px from the element’s top edge.

Example 2

Position the .box element 40px from the bottom of the .ancestor element.

<div class="ancestor">
<div class="box"></div>
</div>
.ancestor {
position: relative;
}
.box {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
bottom: 40px;
}

The above example gives the following output:

Shows a parent container with relative position and a child container inside it with absolute position

All contributors

Contribute to Docs

Learn CSS on Codecademy