Positions

How are elements positioned?

The position of an element determines where and how it is displayed on the page. An element can have one of four positions: position: static | relative | absolute | fixed;

By default, the position value of every element is set to static. This means that the element is positioned according to the normal flow of the document (boxes withing boxes). All static elements are treated as not positioned, meaning that the top, right, bottom, and left properties will not affect their position.

Relative positioning

The relative position value causes an element to be positioned relative to its normal position. The space once occupied by the element is still taken into account when the element is positioned. 

<p>Reprehenderit <span>relative</span> irure  quis. Voluptate nulla anim velit incididunt esse aliqua ullamco sint consectetur adipisicing excepteur laborum nulla.</p>
+ 
span {
  position: relative;
  bottom: 18px;
  right: -12px;
  color: deeppink;
}
→

Reprehenderit relative irure quis. Voluptate nulla anim velit incididunt esse aliqua ullamco sint consectetur adipisicing excepteur laborum nulla.

Absolute positioning

The absolute position value causes an element to be positioned relative to the nearest positioned ancestor. The space once occupied by the element is collapsed (not taken into account). 

<div class="ancestor">
  <ol>
    <li>Position static</li>
    <li>Position static</li>
    <li>Position static</li>
    <li id="absolute-item">Position absolute</li>
    <li>Position static</li>
    <li>Position static</li>
  </ol>
</div>
+ 
div.ancestor {
  position: relative;
  padding: 24px;
}

#absolute-item {
  position: absolute;
  bottom: 0;
  left: 0;
}
→
  1. Position static
  2. Position static
  3. Position static
  4. Position absolute
  5. Position static
  6. Position static

Fixed positioning

The fixed position value causes an element to be positioned relative to the viewport. The space once occupied by the element is collapsed (not taken into account). 

<ol>
  <li>Position static</li>
  <li>Position static</li>
  <li>Position static</li>
  <li id="fixed-item">Position fixed</li>
  <li>Position static</li>
  <li>Position static</li>
</ol>
+ 
#fixed-item {
  position: fixed;
  right: 16px;
  bottom: 16px;
}
→
  1. Position static
  2. Position static
  3. Position static
  4. Position fixed
  5. Position static
  6. Position static

Sticky positioning

The sticky position value is a hybrid of both relative and absolute positioning, in that it still takes up space but can stick to a desired edge of its ancestor while scrolling. For position: sticky to work, none of its ancestors can have their overflow set to overflow: hidden. 

<div class="scroll-container">
  <section>
    <h2 class="sticky-top">Sticks to top</h2>
    <p>Lorem ipsum…</p>
  </section>
  <section>
    <p>Lorem ipsum…</p>
    <h2 class="sticky-bottom">Sticks to bottom</h2>
  </section>
</div>
+ 
.scroll-container {
  height: 256px;
  overflow-y: scroll;
}

section {
  height: 512px;
  background-color: #e4e4e4;
}

h2 {position: sticky;}

.sticky-top {top: 0;}

.sticky-bottom {bottom: 0;}
→

Sticks to top

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, voluptatibus. Voluptate mollit ut excepteur minim. Deserunt nostrud excepteur voluptate est adipisicing commodo in laborum. Culpa ut duis duis proident elit eu. Voluptate pariatur minim voluptate nostrud consequat excepteur laborum nulla proident irure proident labore. Consectetur reprehenderit nostrud duis in excepteur non sint est pariatur. Proident commodo minim quis non et ad occaecat ut. Reprehenderit aute eu amet ipsum sunt amet proident deserunt est nostrud proident id. Aute laborum occaecat veniam ipsum in ullamco aliquip ex nulla eu veniam minim aliquip commodo amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate mollit ut excepteur minim. Deserunt nostrud excepteur voluptate est adipisicing commodo in laborum. Culpa ut duis duis proident elit eu. Voluptate pariatur minim voluptate nostrud consequat excepteur laborum nulla proident irure proident labore. Consectetur reprehenderit nostrud duis in excepteur non sint est pariatur. Proident commodo minim quis non et ad occaecat ut. Reprehenderit aute eu amet ipsum sunt amet proident deserunt est nostrud proident id. Aute laborum occaecat veniam ipsum in ullamco aliquip ex nulla eu veniam minim aliquip commodo amet.

Sticks to bottom