How does z-index work?

Question

How does z-index ? Does it work on elements without a given position ? Does it support elements (i.e. Makes them on top) that have the specified position ?

Should the numbers be negative like this?

 <div style='z-index:-2;'>below</div> <div style='z-index:-1;'>less below</div> <div style='z-index:0;'>on top</div> 

? Or not? Do all positive numbers (in increasing value) end with the last one located above, in the middle in the middle, and the first below?

I participate in W3Schools, and their lesson on this is so confusing !: (

Many thanks!

Answer 1

Both negative and positive integers are allowed.

The position must be set on the element.

Before delving into these details, let me explain the z-index from scratch.

Each web page consists of so-called stacking contexts. You can think of it as literally a stack of elements. The z-index property determines the order of elements in each stack, with a higher z index being placed further up.

All pages start with the root context of the stack, which builds from the root element (as you would expect). But more stacking contexts can be created in several ways. One way is an absolutely positioned div; his children will be in the new context of stacking.

The specs list all instances that create a new stacking context. As others have argued, this includes clearly positioned elements and will soon include elements that are not completely opaque.

As I said, z-index takes effect if you explicitly set the position of the element. This means that it must be fixed , absolute or relative . This is best illustrated by an example, I think.

In this example , we expect the blue div to be on top of gray, given its z-index, right? But, as you can see, this is at the bottom. This, of course, is because we have not established his position. As soon as we do this, it will display as we expected. Again, you have to set the position .

The specifications also indicate that negative values ​​are accurate. With that said, you don't need to use negative values. It is also great to use positive integers. The default z-index for an element is 0.

For the record, w3schools is, as you know, an unreliable source for learning. Although this can be a quick and convenient resource, there are many gaps in their information, and sometimes incorrect information. I recommend that you use more reliable sources such as the Mozilla Developer Network , as well as the specifications themselves).

Answer 2

Before starting the explanation, let me note that the z-index only affects the fact that the element displays the value position:relative , position:absolute or position:fixed (NOT static ), because each of them does this has its own stack context . This means that values ​​such as initial or inherit may or may not work depending on the situation.

Also note that in this post I will use the 1.1.1 format to indicate that I select the first element of the first child of the first child. 2.1.1 will be the first first first child of the first element, etc.

---

I think z-index best explained using a subscription analogy. Let's start with the simplest example:

 <div class="top-level"></div> <div class="top-level sibling"></div> 

We can present this in terms of such a list:

• Top level
• Highest level sibling

Now, by default, those further in the list will be displayed on top of them in front of it. Thus, in this case 2 will be located on top of 1.

---

What z-index allows us to do is significantly change the order of this list (within certain limits). The higher the z-index, the further down the list is our item.

I use inline CSS here to show it easily, but you should definitely avoid inline CSS in production code.

 <div class="top-level" style="z-index: 1;"></div> <div class="top-level sibling"></div> 

Now this will change our optional list to look like this:

• Highest level sibling
• Top Level - z-index: 1

Excellent! Now the first element of our HTML will be displayed on top of our second.

---

If it becomes more complicated, this is when we are dealing with child (nested) elements.

An easier way to think about this situation is to think that when an element begins to be rendered, it will display all the children of this element before moving to any siblings .

Also keep in mind that sub-lists cannot change levels , which means that they cannot be at the same level as parents or their children.

This means that if we have the following:

 <div class="top-level"> <div class="sub-level" style="z-index: 1;"></div> </div> <div class="top-level sibling"></div> 

Our helper display lists will look like this:

• Top level
  • Sub level - z-index1
• Highest level sibling

Thus, we look at our top level and see which one is at the bottom of the list. In this case, 2.0, so that it will be above 1.0. Then we will see if he has any signatures (children). This is not so, so we move on to 1.0.

1.0 has a child 1.1, which will be visually higher than 1.0 (exactly the same as if we hadn't given it a z-index), but it will still be lower than 2.0 because 1.0 is lower than 2.0.

Thus, the z-index here does not help us, because 1.1 does not have a single brother and sister.

---

Take a slightly more complex example:

 <div class="top-level"> <div class="sub-level" style="z-index: 2;"></div> <div class="sub-level sibling"></div> <div class="sub-level sibling" style="z-index: 1;"></div> </div> <div class="top-level sibling"> <div class="sub-level"></div> </div> 

What is the optional list for this example?

I will give it to you, but it's good to try and do it yourself.

• Top level
  • Junior Level
  • Ancillary Level - z-index1
  • Sub level - z-index2
• Summit brother
  • Sub level

Thus, from the point of view of the visual representation from top to bottom, the order is 2.1, 2.0, 1.3, 1.2. 1.1, 1.0.

This is not so bad, is it?

This behavior is true no matter how deep or how many brothers and sisters there are.

---

The only exception to the rule that children appear above their parents is when children have a negative z-index . When a negative z-index is specified, it is placed below the parent element.

Thus, if we have the following:

 <div class="top-level"> <div class="sub-level" style="z-index: -1;"></div> </div> <div class="top-level sibling"></div> 

The subscription tree will look like this:

• Sub level - z-index-1
  • Top level
• Highest level sibling

And the top to bottom layer will be 2.0, 1.0, 1.1.

A slightly more complex example:

 <div class="top-level"> <div class="sub-level" style="z-index: -1;"></div> <div class="sub-level sibling"></div> </div> <div class="top-level sibling"></div> 

List view:

• Sub level - z-index-1
  • Top level
    • Sub level
• Highest level sibling

But you should avoid negative z-index es . If you think you need them, it is likely that your HTML is structured incorrectly.

---

That's about it! If you are still interested in learning more, reading characteristics is always good.

Keep in mind that other properties , including but not limited to opacity , transform and will-change , create your own stacking context and may affect the order in which elements are displayed.

---

_{opacity works similarly to z-index - a child can only be opaque like its parent, but it cannot have negative values.}

Answer 3

The css z-index property only works with positioned elements, that is, elements must be absolute, fixed or relative position for the z-index property to take effect.

The higher the z-index, the closer it will appear to it. Values ​​specified for the z-index property can be positive or negative. A positioned element with a z-index value of 4 will be displayed above a positioned element with a z-index value of 3.

In CSS 2.1, each field has a position in three dimensions. In addition to their horizontal and vertical positions, the boxes lie along the z axis, and are formatted one on top of the other. Z-axis positions are especially important when drawers are stacked visually.

Answer 4

The only exception to the rule that children appear above their parents is when children have a negative index z. When a negative z-index is specified, it is placed below the parent element.

Answer 5

This is just the link you are looking for! He really explains it well. In principle, all this is the higher the number, the higher the stack. Thus, 1 is above 0 and -1 is under the z-index of 0, however, they should remain positive, since they are not the basis for using negatives and are considered bad practice. The browser interprets when it displays the page, like any other CSS or HTML code.

Hope this helps you!