In this article, you’ll learn about how to use the z-index CSS property… The only way to break into the 3rd dimension with CSS!

Most of the time when you’re styling things with CSS, it’s on a 2D plane. HTML elements are placed horizontally/vertically on the page like stacking blocks in Tetris. The z-index changes this paradigm and gives you the ability to define a visual hierarchy on the 3rd plane: the z-axis.

In this code snippet, the #navbar, will overlap the #footer (if their position overlaps) because it has a higher z-index.

#navbar {
  position: relative;
  z-index: 11;
}

#footer {
  position: relative;
  z-index: 10;
}

If we weren’t using z-index at all, the navbar would simply push the footer away instead of overlapping it.

#css