CSS position Property

The position property specifies that an element is positioned.

Positioned elements do not participate in the standard page flow.

Options are: static, relative, absolute, fixed, or sticky.

Example

#

Two nested elements. The inner element has an absolute position and the outer element a relative position. The top and right coordinates of the inner element are relative to the sides of the outer element.

<style>
  .relative {
    position: relative;
    max-width: 400px;
    height: 200px;
    background-color: lightblue;
  }

  .absolute {
    position: absolute;
    top: 80px;
    right: 10px;
    width: 200px;
    height: 100px;
    background-color: steelblue;
  }
</style>

<div class="relative">
  <div class="absolute"></div>
</div>

Using position

#

A position is relative to a container, such as the document body, or a parent element.

Exact pixel positions are specified with top, right, bottom, and left properties.

Syntax

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

Values

#

Value Description
static Default. The element renders in the order as they appear in the document flow
relative The element is positioned relative to its normal position
absolute The element is positioned relative to a positioned (not static) parent element
fixed The element is positioned relative to the browser window
sticky The element is positioned based on the scrolling position of a parent element
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

This example has an element that is positioned based on the parent's scroll position. This can be useful when creating sticky menu bars on top of a page.

<style>
  .sticky {
    background-color: steelblue;
    color: white;
    padding: 15px;
    top: 0;
    position: sticky;
  }
</style>

<div style="position: relative">
  <div class="sticky">I am sticky!</div>

  <div style="padding-bottom:800px">
    <p>
      In this example, the sticky element 
      sticks to the top of the page (top: 0),
      when you reach its scroll position.
    </p>
    <p>Scroll back up to remove the stickyness.</p>
    <p>
      Some text to enable scrolling.. Lorem 
      ipsum dolor sit amet, illum definitiones 
      no quo, maluisset concludaturque et eum, 
      altera fabulas ut quo. Atqui causae 
      gloriatur ius te, id agam omnis evertitur 
      eum. Affert laboramus repudiandae nec et. 
      Inciderint efficiantur his ad. Eum no 
      molestiae voluptatibus.
    </p>
    <p>
      Some text to enable scrolling.. Lorem
      ipsum dolor sit amet, illum definitiones
      no quo, maluisset concludaturque et eum,
      altera fabulas ut quo. Atqui causae
      gloriatur ius te, id agam omnis evertitur
      eum. Affert laboramus repudiandae nec et.
      Inciderint efficiantur his ad. Eum no
      molestiae voluptatibus.
    </p>
  </div>
</div>

Did you know?

Did you know?

A perfectly centered element

The position property can be used to perfectly center an element inside its container. The element stays in the center even when the browser resizes.

<style>
  .parent {
    border: solid 1px steelblue;
    height: 300px;
    position: relative;
  }

  .child {
    background: steelblue;
    height: 80px;
    width: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
  }
</style>

<div class="parent">
  <div class="child"></div>
</div>

Browser support

This table shows when position support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
7.0 Oct 2006
Opera
4.0 Jun 2000
Safari
1.0 Jun 2003

You may also like

Guides