position

Chooses how an element is positioned: in the flow, relative, absolute, fixed, or sticky.

Initial value: static
Inherited: No
Animatable: no
Applies to: all elements
JavaScript: element.style.position = "absolute"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.card {
  position: relative;
}

.card .badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

Preview

Definition and usage

The position property decides how an element’s location is calculated. By default (static), the element sits wherever it falls in the page’s normal flow, and properties like top and left do nothing.

relative shifts the element relative to its normal spot, which stays reserved for it. absolute takes the element out of the flow and positions it relative to the nearest positioned ancestor. fixed pins the element to the browser window, so it doesn’t scroll with the page.

sticky combines both behaviors: the element flows normally until scrolling brings it to a threshold set by, for example, top: 0. Then it sticks, but only within its parent.

Syntax

position: static | relative | absolute | fixed | sticky;

Values

static
Normal flow. The demo’s top and left are ignored.
relative
The element shifts 30px down and to the right, and its original spot stays empty.
absolute
The element drops out of the flow (element 3 takes its place) and positions itself relative to the positioned ancestor.
fixed
The element pins itself to the window. Here, the window is the preview frame.
sticky
Scroll the list in the preview: the header sticks to the top edge of its container.

Value	Description
static	Normal flow. The demo’s `top` and `left` are ignored.
relative	The element shifts 30px down and to the right, and its original spot stays empty.
absolute	The element drops out of the flow (element 3 takes its place) and positions itself relative to the positioned ancestor.
fixed	The element pins itself to the window. Here, the window is the preview frame.
sticky	Scroll the list in the preview: the header sticks to the top edge of its container.

Values in practice

static

Normal flow. The demo’s top and left are ignored.

.demo { position: static; }

relative

The element shifts 30px down and to the right, and its original spot stays empty.

.demo { position: relative; }

absolute

The element drops out of the flow (element 3 takes its place) and positions itself relative to the positioned ancestor.

.area { position: relative; }
.demo { position: absolute; }

fixed

The element pins itself to the window. Here, the window is the preview frame.

.demo { position: fixed; }

sticky

Scroll the list in the preview: the header sticks to the top edge of its container.

.demo { position: sticky; top: 0; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

An element with absolute positions itself relative to the nearest ancestor whose position is something other than static. The usual fix is adding position: relative to the parent.
sticky doesn’t work when an ancestor has overflow: hidden, or when you don’t set a threshold, such as top: 0.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course