position

When an element is referred to as a positioned element, it means that its position has been changed from being static, to one of four available values: relative, absolute, fixed, sticky.

Once an element has been positioned (given a non-static value), its position on the page is determined using the offset properties: top, right, bottom, and left.

value positioning stays in normal flow allows offset properties
static default yes no
relative relative to its current position, acts as an anchor point for absolutely positioned elements yes yes
absolute locks the element in place relative to it’s positioned parent no yes
fixed locks the element to the browser window (viewport) no yes

relative

p {
  position: relative;
  bottom: 10px;
}

absolute

<div style="position: relative; padding: 1em; background: plum">
  RELATIVE
</div>

<div style="position: absolute; padding: 1em; background: salmon">
  ABSOLUTE
</div>
<div style="position: relative; padding: 1em; background: rgba(0,255,255, .5);">
  <div style="position: absolute; padding: 1em; background: rgba(221,160,221, .5);">
    ABSOLUTE inside a relative parent element
  </div>
</div>

<div style="position: relative; padding: 1em; background: rgba(70, 130, 180, .5);">
  <div style="position: fixed; padding: 1em; background: rgba(102, 51, 153, .5);">
    FIXED inside a relative parent element
  </div>
</div>

fixed

relative absolute fixed
acts as anchor point for absolutely positioned (both absolute and fixed) elements positioned relative to the closest relative positioned parent element positioned relative to the closest relative or absolute positioned parent element
  sticks to the document sticks to the viewport
  moves with the document when you scroll stays in place when you scroll
stays in the normal flow breaks normal flow breaks normal flow
Block elements, take up full width of the containing element size determined by content, unless explicitly defined size determined by content, unless explicitly defined

absolute vs. fixed

When using offsets to move elements, it only moves the element you targeted, the rest stay in place. So even though elements are positioned relatively, they don’t move relatively, they stay in their places in the document where they occured.