The CSS z-index Property: What You Need to Know (2024)

When building web pages, we often want to layer different elements on top of each other to create immersive, rich designs and interfaces. But, if two elements overlap, how do you control which one sits on top?

The CSS z-index Property: What You Need to Know (1)

As with many things in web design, the answer lies in CSS — specifically the z-index property. z-index is a key property in CSS, since it allows you to control the stacking order of elements on a web page.

In this post, we’ll discuss what the z-index property means in CSS, how to use it, and some tips for getting the most out of it in your projects. Let’s get started.

What is z-index?

z-index is the CSS property that controls the stacking order of overlapping elements on a page. An element with a higher z-index value will appear in front of an element with a lower z-index value.

The property is called “z-index” because it sets the order of elements along the z-axis. If the x-axis goes left-to-right and the y-axis goes top-to-bottom, the z-axis adds the dimension of “toward” and “away from” the user. Elements with a higher z-index value appear closer to the user, and elements with a lower value look farther away.

The CSS z-index Property: What You Need to Know (3)

If two page elements overlap and no z-index value is given (or both elements have the same z-index value), the element placed last in the HTML code will appear on top of the element placed before it in the code. Also, elements that are given a position value (other than static, the default value) appear above elements without a position in the stacking.

How to Use z-index

The z-index property uses the following syntax:

z-index: [integer]<!-- or -->z-index: auto

The z-index property takes an integer value. The higher the integer, the higher the element will be in the stacking order. For example, if you have two elements with a z-index of 0 and 1, the element with a z-index of 1 will be in front of the element with a z-index of 0.

z-index can also take the value auto, which sets the stacking level of the element to 0, the default value.

Let’s look at an example. First, here’s a stack of four div elements without the z-index property:

See the Pen z-index: stacking example (no z-index) by HubSpot (@hubspot) on CodePen.

As you can see, the order of the stacking is determined by the order of the divs in the HTML code. Each div is placed on top of the div before it.

Now, let’s use z-index to flip this ordering:

See the Pen z-index: stacking example (with z-index) by HubSpot (@hubspot) on CodePen.

In this example, we use z-index to override the default stacking. Now, the first written div (“first”) is at the top of the stack.

Notice in these examples that divs are also given a position value. To control an element with the z-index property, the element must have a value for position that is not static (the default). z-index will apply to elements with a position of relative, fixed, absolute, or sticky. To learn more about how the CSS position property works, see our intro guide to CSS position.

z-index can also take negative integer values, like -1. Since the default z-index value for page elements is 0, elements with a negative z-index value appear behind elements without a set z-index value.

See the Pen z-index: stacking example (negative values) by HubSpot (@hubspot) on CodePen.

z-index Stacking Context

When using z-index, it’s also important to consider how stacking is affected in nested elements, since things get a bit more complex.

A z-index value positions an element on the z-axis relative to other elements in the same stacking context. A stacking context is a group of elements that share the same parent element and whose z-index values are compared with each other.

In the examples above, all divs were in the same stacking context, being direct child elements of <body>. Here’s another example that contains multiple stacking contexts:

See the Pen z-index: stacking context example 1 by HubSpot (@hubspot) on CodePen.

In this example, we have two container divs (marked with black borders), each with two child elements. Each of these containers has its ;own stacking context.

If we take container-2 and move it underneath container-1, we can see how these stacking contexts behave:

See the Pen z-index: stacking context example 2 by HubSpot (@hubspot) on CodePen.

Notice here that div 4 is in front of div 1, even though div 1 has a higher z-index value than div 4.

This is because container-2 itself has a higher z-index than container-1. Therefore, all child elements inside container-2 will sit in front of all child elements inside container-1, no matter their z-index values. The z-index values only determine position relative to other elements in the same container (i.e., the same stacking context).

Control your element stack with z-index.

When used correctly, the z-index property is a powerful but easy-to-understand tool for ordering your elements the right way, and is a must for anyone learning CSS. Just make sure to keep your z-index values tidy, so you’re not getting lost in the layers!

The CSS z-index Property: What You Need to Know (2024)

FAQs

The CSS z-index Property: What You Need to Know? ›

z-index is the CSS property that controls the stacking order of overlapping elements on a page. An element with a higher z-index value will appear in front of an element with a lower z-index value. The property is called “z-index” because it sets the order of elements along the z-axis.

What do you need to know about z-index? ›

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default).

What is the rule of z-index in CSS? ›

Definition and Usage

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

What is the CSS z-index property used for? ›

Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).

What are the requirements for z-index? ›

The css property z-index only works on positioned elements, meaning elements must be position absolute, fixed or relative in order for the z-index property to take effect. The higher the z-index the closer to the front it will appear. The values specified for the z-index property can be positive or negative.

What is the best practice of using z-index? ›

How to Use z-index. The z-index property takes an integer value. The higher the integer, the higher the element will be in the stacking order. For example, if you have two elements with a z-index of 0 and 1, the element with a z-index of 1 will be in front of the element with a z-index of 0.

Why do we need z-index? ›

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

How high can z-index go in CSS? ›

The maximum range is ±2147483647. In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top.

How to avoid z-index? ›

Z-index can be avoided in the vast majority of cases

We have a yellow square and a red square. We added a z-index of 1 so that the yellow square appears on top. However, we can achieve the exact same outcome by simply rearrange the order of the div's and getting rid of the z-index.

Is there an alternative to z-index? ›

A simple alternative to using z-index in CSS: Move the markup I want on top to the end of the HTML. Markup that's last is automatically placed over markup with the same z-index that's earlier in the HTML. I find with this technique, I rarely need to declare z-index.

Can z-index be negative? ›

You can have negative z-index

One area where this is useful is when using pseudo elements and wanting to position them behind the content of their parent element.

Why is z-index 9999? ›

Often z-index is given arbitrary "high enough" number to be reasonably sure element would be really on top. It doesn't have to be this high, 9999 just makes sure if there is by a chance element with z-index 9998, 3000, 100 ...etc. (anything below 9999) - it will be above it.

What are the requirements to use the Z value? ›

Requirements for a Z-Test
  • A Sample size that's greater than 30. This is because we want to ensure our sample mean comes from a distribution that is normal. ...
  • The standard deviation and mean of the population is known.
  • The sample data is collected/acquired randomly.
Feb 2, 2023

What do I need to know about Z scores? ›

Z-score is a statistical measurement that describes a value's relationship to the mean of a group of values. Z-score is measured in terms of standard deviations from the mean. In investing and trading, Z-scores are measures of an instrument's variability and can be used by traders to help determine volatility.

What is the highest possible z-index? ›

The maximum range is ±2147483647. In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top.

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Aron Pacocha

Last Updated:

Views: 6238

Rating: 4.8 / 5 (48 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Aron Pacocha

Birthday: 1999-08-12

Address: 3808 Moen Corner, Gorczanyport, FL 67364-2074

Phone: +393457723392

Job: Retail Consultant

Hobby: Jewelry making, Cooking, Gaming, Reading, Juggling, Cabaret, Origami

Introduction: My name is Aron Pacocha, I am a happy, tasty, innocent, proud, talented, courageous, magnificent person who loves writing and wants to share my knowledge and understanding with you.