Z-Index in CSS

Positioning Overlapping Elements with Cascading Style Sheets

Contemporary artwork background
axllll/iStock Vectors/Getty Images

One of the challenges when using CSS positioning for web page layout is that some of your elements may overlap others. This works fine if you want the last element in the HTML to be on top, but what if you do not or what if you want to have elements that currently do not overlap others to do so because the design calls for this "layered" look? In order to change the way elements overlap you need to use the property of CSS.

If you’ve used a graphics tools in Word and PowerPoint or more robust image editor like Adobe Photoshop, then chances are you’ve seen something like z-index in action. In these programs, you can highlight the object(s) that you’ve drawn, and choose an option to “Send to back” or “Bring to front” certain elements of your document. In Photoshop, you do not have these functions, but you do have the "Layer" pane of the program and you can arrange where an element falls in the canvas by rearranging these layers.  In both of these examples, you are essentially setting the z-index of those objects.

What is z-index?

When you’re using CSS positioning to position elements on the page, you need to think in three dimensions. There are the two standard dimensions: left/right and top/bottom. The left to right index is known as the x-index, while the top to bottom one is the y-index. This is how you would position elements horizontally or vertically, using these two indexes.

When in comes to web design, there is also the stacking order of the page. Each element on the page can be layered above or below any other element. The z-index property determines where in the stack each element is. If x-index and y-index are the horizontal and vertical lines, then z-index is the depth of the page, essentially the 3rd dimension.

I like to think of the elements on a webpage as pieces of paper, and the web page itself as a collage. Where I lay the paper is determined by positioning, and how much of it is covered by the other elements is the z-index.

The z-index is a number, either positive (e.g. 100) or negative (e.g. -100). The default z-index is 0. The element with the highest z-index is on top, followed by the next highest and so on down to the lowest z-index. If two elements have the same z-index value (or it’s not defined, meaning the use the default value of 0) the browser will layer them in the order they appear in the HTML.

How to Use z-index

Give each element you want in your stack a different z-index value. For example, if I have five different elements:

  • element 1 — z-index of -25
  • element 2 — z-index of 82
  • element 3 — z-index not set
  • element 4 — z-index of 10
  • element 5 — z-index of -3

They will stack in the following order:

  1. element 2
  2. element 4
  3. element 3
  4. element 5
  5. element 1

I recommend using vastly different z-index values to stack your elements. That way, if you add more elements to the page later, you have room to layer them in without having to adjust the z-index values of all the other elements. For example:

  • 100 for my top-most element
  • 0 for my middle element
  • -100 for my bottom element

You can also give two elements the same z-index value. If these elements are stacked, they will display in the order they are written in the HTML, with the last element on top.

One note, for an element to effectively use the z-index property, it must be a block level element or use a display of "block" or "inline-block" in your CSS file.

Original article by Jennifer Krynin. Edited on 12/09/16 by Jeremy Girard.