Position & z-index · Web Dev 1

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

Position & z-index ➔
CSS layout cheat sheet ➔

Start