How to Use 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 z-index property of CSS.

If you’ve used graphics tools in Word and PowerPoint or a 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 on 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 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 it 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.

Think of the elements on a web page as pieces of paper and the web page itself as a collage. Where you 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 you have five different elements:

  • element A — z-index of -25
  • element B — z-index of 82
  • element C — z-index not set
  • element D — z-index of 10
  • element E — z-index of -3

They will stack in the following order:

  1. element B
  2. element D
  3. element C
  4. element E
  5. element A

It's recommended to use 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 your top-most element
  • 0 for your middle element
  • -100 for your 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.

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.

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Use Z-Index in CSS." ThoughtCo, Sep. 30, 2021, thoughtco.com/z-index-in-css-3464217. Kyrnin, Jennifer. (2021, September 30). How to Use Z-Index in CSS. Retrieved from https://www.thoughtco.com/z-index-in-css-3464217 Kyrnin, Jennifer. "How to Use Z-Index in CSS." ThoughtCo. https://www.thoughtco.com/z-index-in-css-3464217 (accessed March 29, 2024).