<div id="wrapper">
  <div class="box blue">
    Position static (default
  </div>
  <div class="box red relative">
    Positioned relative - pushed 20px left and 50px from the top - moved to the back (z-index: -1)
  </div>
  <div class="box blue">
    Position static (default)
  </div>
  <div class="box green absolute">
    Positioned absolute - top, left, right, bottom refer to document (not wrapper) <br>Absolutely positioned element is taken out of the document flow
  </div>
  <div class="box yellow fixed">
    Positioned fixed -Element will stay in the viewport when scrolling -similar to `absolute` but fixed to viewport
  </div>
  <div class="box blue">
    Position static (default)
  </div>
  <div class="box purple sticky">
    Positioned sticky - Element placed at normal    position - then keeps 35px from top so it will stay in the viewport when scrolling down - similar to `relative` but stays in viewport once entered
  </div>
  <div class="box blue"></div>
  <div class="box blue"></div>
  <div class="box blue"></div>
  <div class="box blue"></div>
  <div class="box blue"></div>
</div>
#wrapper {
  max-width: 700px;
  margin: 0 auto;
  border: 2px solid black;
  padding: 1rem;
}

.box {
  width: 350px;
  height: 150px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.purple {
  background-color: purple;
}

.relative {
  position: relative;
  left: 20px;
  top: 50px;
  z-index: -1;
}

.absolute {
  position: absolute;
  top: 0px; /* 0px distance to top of document */
  left: 50vw; /* Pushed half the viewport width to the left */
}

.fixed {
  /* Element fixed to the viewport when scrolling */
  position: fixed;
  bottom: 10px;
  right: calc(50vw - 350px - 0.5rem);
}

.sticky {
  position: sticky;
  top: 35px;
  margin-left: -2rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.