Position & z-index

A quick overview of how CSS positioning works with relative & static and a small intro to z-index.

Go fullscreen: ⌃⌥F

Position & z-index

position

  • Turn on coordinate-based movement
  • or Control the coordinate container

position: static

  • the default

position: absolute

  • move with coordinates

position: relative

  • reset coordinates
  • always on parent container
HTML 
<div class="banner">
  <img src="placeholder-16by9.svg" alt="">
  <div class="banner-content">
    <h2>Free Mars!</h2>
    <p>The Free Mars Coalition needs your help to take back our planet.</p>
  </div>
</div>
CSS 
.banner {
  position: relative;
}
.banner-content {
  padding: 0 1rem;
  position: absolute;
  bottom: 1rem;
}

z-index: 10

  • Controls layering
  • Higher number is closer to you
  • Only on absolute or relative elements

Like layers in Photoshop or Illustrator: higher up in the palette is closer

Videos & tutorials

Start

Position & z-index

A quick overview of how CSS positioning works with relative & static and a small intro to z-index.