CSS - Positioning - Static, relative, fixed, absolute and sticky

The CSS position property controls how an element is positioned relative to other elements on the page.

The 5 available values are:

static The element is positioned according to the standard rules of HTML and CSS layout. The default.
relative The element is offset relative to it's original location. The element remains in the document flow.
fixed The element is offset relative to the browser window. The element is removed from the document flow.
absolute The element is offset relative to the html document or to the nearest parent element that is positioned relative. The element is removed from the document flow.
sticky A hybrid of relative and fixed. The element is positioned as relative within it's parent, until it crosses a threshold, at which point it becomes fixed.

The position property uses 4 other CSS properties: top, right, bottom, and left.

position: static

The element is positioned according to the standard rules of HTML and CSS layout. The default.

position: relative

The element is offset relative to it's original location. The element remains in the document flow.


  .child-box
  {
      position: relative;
      left: 150px;
      top: -90px;
  }

Parent Child Sibling


  <div class="parent-box">
      Parent
      <span class="child-box">
          Child
      </span>
      Sibling
  </div>

Article continues below Ad.

Ads by Google

position: fixed

The element is offset relative to the browser window. The element is removed from the document flow.


  .child-box
  {
      position: fixed;
      left: 10px;
      top: 10px;
  }

Parent Child Sibling


  <div class="parent-box">
      Parent
      <span class="child-box">
          Child
      </span>
      Sibling
  </div>

Article continues below Ad.

Ads by Google

position: absolute

The element is offset relative to the html document or to the nearest parent element that is positioned relative. The element is removed from the document flow.


  .child-box
  {
      position: absolute;
      left: 50px;
      top: 50px;
  }

You will need to scroll to the top of the document to find the element.

Parent Child Sibling


  <div class="parent-box">
      Parent
      <span class="child-box">
          Child
      </span>
      Sibling
  </div>

Article continues below Ad.

Ads by Google

position: sticky

A hybrid of relative and fixed. The element is positioned as relative within it's parent, until it crosses a threshold, at which point it becomes fixed.


  .child-box
  {
      position: sticky;
      top: 0;
  }

Scroll down to see sticky in action.

Child


  <div class="child-box">
      Child
  </div>

Remind me, what is a CSS property?


  /* This is a CSS rule */
  byElementName, .byClass, #byId /* These are CSS selectors. */
  {
     /* This is a CSS declaration block */
     property: value; /* This is a CSS declaration */
     property: value; /* A CSS declaration assigns a value to a property */
  }

Ads by Google

Ask a question, send a comment, or report a problem - click here to contact me.