Position

CSS Position

The CSS position property controls how an element is positioned in a document. Elements can remain in their normal position, be moved relative to that position, be positioned relative to another box, or remain in a particular location as the page scrolls.

The position Property

The CSS position property determines the positioning method used for an element. The most common values are static, relative, absolute, fixed, and sticky.

div {
  position: relative;
}

For positioned elements, the top, right, bottom, and left properties can be used to control the element's position.

Static Positioning

static is the normal positioning method for most HTML elements. A statically positioned element follows the normal flow of the document.

.box {
  position: static;
}

The top, right, bottom, and left offset properties do not move a statically positioned element.

Relative Positioning

An element with position: relative; remains in normal flow, but it can be visually moved from its normal position using offset properties.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

The element moves 10 pixels downward and 20 pixels to the right. The space where the element would normally have appeared remains reserved in the layout.

Absolute Positioning

An element with position: absolute; is removed from normal flow. Other elements are laid out as though the absolutely positioned element were not occupying its original space.

.box {
  position: absolute;
  top: 20px;
  right: 20px;
}

The element is positioned relative to its containing block. This is often established by a nearby ancestor that has a position value other than static.

Positioning Within a Parent

A common pattern is to give a parent element position: relative; and position a child absolutely within it.

.parent {
  position: relative;
  height: 150px;
}

.child {
  position: absolute;
  top: 10px;
  right: 10px;
}

The parent remains in normal flow. The absolutely positioned child can then use the parent's box as its positioning reference.

Fixed Positioning

An element with position: fixed; is removed from normal flow and is usually positioned relative to the browser's viewport.

.notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

Because the element is fixed relative to the viewport in typical use, it stays in the same visible location as the document scrolls. Fixed positioning is often used for controls or interface elements that need to remain available on screen.

Sticky Positioning

An element with position: sticky; behaves according to normal flow until scrolling reaches a specified offset. It can then remain at that offset within the limits of its containing area.

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

In this example, the element can scroll normally until it reaches the top of its scrolling area, where it can remain until its containing block reaches its boundary.

Sticky positioning requires an offset such as top to define where the element should begin sticking along that axis.

Positioning with Offsets

The top, right, bottom, and left properties specify offsets for positioned elements.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

The exact effect of an offset depends on the positioning method. With relative positioning, for example, top: 10px; moves the element 10 pixels downward from its normal position.

Positioning and Normal Flow

Understanding whether an element remains in normal flow is important when using CSS positioning. Static and relative positioning keep the element's normal space in the document layout.

Absolute and fixed positioning remove the element from normal flow, so surrounding elements do not reserve space for it. Sticky elements remain part of normal flow even while they are temporarily held at a scrolling offset.

The next tutorial explains Normal Flow in more detail.

Overlapping Elements

Positioned elements can overlap other content, especially when relative, absolute, fixed, or sticky positioning changes where they are displayed.

.box {
  position: absolute;
  top: 20px;
  left: 20px;
}

When positioned elements overlap, CSS stacking rules determine which element appears in front. The z-index property can be used with positioned elements to help control their stacking order.

Try CSS Positioning

Edit the position, top, and left values in the example to see how relative and absolute positioning affect the location of an element.

Summary

The CSS position property controls how an element is positioned. static follows normal positioning, relative offsets an element from its normal position, absolute removes an element from normal flow and positions it within its containing block, fixed commonly positions an element relative to the viewport, and sticky combines normal-flow positioning with scroll-based behavior.

The next tutorial covers Normal Flow and explains how elements are arranged when special positioning and layout methods are not changing their normal placement.