The position property

Go back to HTML and CSS Index

There are a lot of ways to create the desired layout of a page - one of them is to use the position property.

The position property

The position property is used to place elements on a page.

The CSS

element {
position: static | relative | absolute | fixed | sticky
}
5.30 | The position property

position: static

The element is placed in the normal flow (standard value when nothing else is specified).

The CSS

div {
height: 10px;
width: 10px;
background-color: green;
position: static;
}
5.2 | The position property

Example

position: relative

The element is placed in the normal flow, but may be moved from that position using the top, right, bottom and left properties.

The CSS

div {
height: 10px;
width: 10px;
position: relative;
right: 10px;
bottom: 10px;
background-color: green;
}
5.31 | The position property

In the example, the div box is moved 10px from the right and 10px from the bottom relatively to its initial position:

Example

The green box is placed relative to it's initial position inside the white box with the pink border.

position: absolute

The element is taken out of the normal flow and placed relatively to its nearest ancestor that has the position property specified - if it has any (if not it will be placed according to the body element). It may be moved from that position using the top, right, bottom and left properties.

The CSS

.parent {
position: relative;
}
div {
height: 10px;
width: 10px;
position: absolute;
right: 10px;
bottom: 10px;
background-color: green;
}
5.32 | The position property

In the example, the div box is moved 10px from the right and 10px from the bottom relatively to its parents position (because the parent has position set to relative):

Example

The green box is placed relative to it's initial position inside the white box with the pink border.

position: fixed

The element is taken out of the normal flow and placed relatively to the initial block element unless an ancestor has the transform, perspective or filter properties set to something other than none. It may be moved from that position using the top, right, bottom and left properties.

It is difficult to include an example of this property value on a page, because it won't be clear "where the box went" - so you will see this in a live example.

position: sticky

The element is placed in the normal flow and will move according to its nearest scrollable ancestor.

You can see an example of it here: position - CSS: Cascading Style Sheets | MDN. However, note that this property value won't work in many cases, as their are many things that can mess up it's functionality.