CSS: Z-index CSS

CSS z-index is a property used to control the stacking order of positioned elements in the HTML document. An element with greater stack order is always in front of an element with a lower stack order.

# CSS
img {
  z-index: -1;
}

# Tailwindcss
<img class="z-50" />

Documentation

• z-index - CSS: Cascading Style Sheets | MDN
• Z-Index - Tailwind CSS

My use case

In the process of building my portfolio website I stumbled upon a case where images for my Article/Post Card components were going on top of the navigation bar. I thought it might be an issue with the relative positioning I used in the styling of the card but that was not the case.

Images of the problem

The solution (using z-index)

The solution was to use the z-index css property, which when put on elements determines what element goes on top. So I added a z-index of 50 with tailwind (z-50) onto the navigation bar and it worked, other page elements now go underneath my sticky navigation bar.

TLDR: The higher element z-index goes on top.

Example: 2 squares one has z-index of 1 and the other has z-index of 2. The z-index 2 square is the one that appears on top if there ever is any overlap on the page.