Mastering z-index in CSS

z-index attribute in CSS: a powerful tool to control the order of page elements stacking

This article explores the z-index attribute in CSS, which is used to control the cascade order of page elements. Elements with higher values ​​will be displayed on elements with lower values. This is similar to the x-axis and y-axis on the page controlling the horizontal and vertical positions of elements respectively, and z-index controls the stacking order of elements on the z-axis.

Key points:

The
• attribute in z-index controls the stacking order of page elements. The higher the value, the more the element is displayed. It only works on elements whose attribute values ​​are position, absolute or relative. fixed
By setting
• without assigning values ​​to position: relative, top, right, bottom or left attributes, you can control the stacking order of elements without changing their original position on the page.
The parsing of the
• z-index value is performed within its parent stacking context, which means that even if the element's z-index value is high, the element may still be displayed elsewhere if its parent container's z-index value is low. Under the element.
• To improve organization and flexibility, it is recommended to use an increment of 100 to set the z-index value. This approach provides 99 available numerical choices when adding a new layer between two existing layers.

Default stacking order

When writing HTML, the back elements in the document will be stacked on top of the front elements by default.

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

In this HTML snippet, if all elements are set to overlap, the footer will be stacked on top of the body content, which in turn will be stacked on top of the header.

Elements can be overlapped by combining position attributes and top, right, bottom, left,

> offset attributes.

position If the absolute attribute of each element is set to

, they will all overlap. Since the footer appears last in the document, it is stacked on top of the first two elements by default.

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

topUse offset properties left and

to see the stacking order of elements more clearly.

Stack context

position: absoluteAlthough overlapping elements can be created using , this does not create the so-called stacking context

.

The stacking context can be created in the following ways:

• The position: absolute element has the relative or z-index attributes, and the auto value is not
.
• autoflexbox items have z-index values ​​that are not
.
• The opacity of the opacity element (
) is less than 1.
• The transform attribute of the none element is set to a non-
value.

The common way to create and use stacking contexts is the first, let's focus on it.

Go back to the previous example, we have three elements overlapping each other, but at the moment they do not have z-index values.

The

z-index attribute allows us to control the stacking order.

If we set the footer z-index to 1, the body z-index to 2, and the header z-index to 3, the default stacking order can be completely reversed.

On the surface it seems simple: the higher the value, the higher the elements stack - so z-index will always be above z-index: 9999. Unfortunately, the reality is more complicated than this. z-index: 9

z-index in stacking context

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

If you add a box inside the

container and position it outside the bottom right corner, we will see it sits above the green box, under the pink box. site-content

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

Based on what we know about

, we might think that to make this yellow box appear on top of the pink box, we just need to set a higher value for z-index. z-index

If we set

to 4 (above z-index), we won't see any changes. People usually try to force stacking with very large numbers (like 9999), but this also has no effect. Seen in the code base such a z-index: 3 value is a code odor, so try to avoid it if possible. z-index

The reason we cannot get the expected result of the yellow box being placed above the pink box is the way

behaves in the stacking context. z-index

To demonstrate this, let's look at a slightly more complex example that I borrowed from the MDN website.

...(The HTML and CSS code in the MDN example is omitted here because the article is too long, but the key explanation part is retained)....

All of this can be explained by the fact that all

values ​​are parsed within their parent stacking context. Because the parent container z-index's value is higher than the footer, all positioning elements within .site-content are evaluated in that context. z-index .site-content Understand the stacking order of elements within the stacking context, you can compare them to children in nested ordered lists.

This can be written as follows:

Header:

• z-index: 5Subject:
• z-index: 4Box 1:
  • z-index: 4.6Box 2:
  • z-index: 4.1Box 3:
  • z-index: 4.3
  Footer:
• z-index: 2
Therefore, even if the header's

is 5 and the box 1's

is 6, its rendering order is 4.6, which is still less than 5. Therefore, box 1 is displayed under the header. z-index z-indexIt was a little confusing at first, but with practice it really started to make sense!

z-index is only suitable for positioning elements

If you want to control the stacking order of elements, you can use z-index. However, position will only take effect when the absolute value of the element is relative, fixed or z-index.

Putting elements accurately with position is great for building complex layouts or interesting UI patterns, but it is often desirable to control the stacking order without moving the elements in the original position on the page.

If this is the case, you can set only position: relative but do not provide any value for top, right, bottom or left. The element will remain in its original position on the page, the document flow will not be interrupted, and the z-index value will take effect.

Negative z-index value can be used

Hydrated elements are often used to build complex shapes or UI components. This usually means that the elements are superimposed on each other and the z-index value continues to increase. To place an element below another element, it just needs to have a lower z-index value, which can be negative. This is useful when using a pseudo-element and want to position it behind its parent element content.

Due to the way stacking context works, if the

or

element is to be positioned after the text content of its parent element, a negative :before value needs to be set on it. :after z-indexz-index strategy

Let's summarize a simple strategy I used when applying

in my project.

z-indexWe used single-digit increments of the value

, but what if we want to add a new element between the two elements set to

and z-index? You have to change many values ​​- possibly throughout the code base, which can cause problems and can cause CSS breaks in other parts of the website. z-index: 3 z-index: 4Set z-index with 100 steps

When dealing with

, you often see code like this:

z-index

It looks bad in my opinion (and only gets worse after attaching

<header class="site-header"></header>
<main class="site-content"></main>
<footer class="site-footer"></footer>

). Seeing such a value usually indicates that the developer does not understand the stacking context and is trying to force one layer to be on top of the other.

!important Instead of using any number like 9999, 53 or 12, we can systematize our

ratio and bring more order to the process. It's not just because I have developer obsessive-compulsive disorder. Seriously.

z-indexI did not use single-digit increments of

, but 100 increments.

z-index

I did this to keep things organized, and also noticed many different layers used in the project. Another benefit is that if you need to add a new layer between two other layers, you can choose between 99 potential values.

.site-header, .site-content, .site-footer {
  position: absolute;
  width: 400px;
  padding: 20px;
}
.site-header {top: 0; left: 0;}
.site-content {top: 50px; left: 50px;}
.site-footer {top: 100px; left: 100px;}

This manual approach is very reliable when building a system, but when used in conjunction with a preprocessor like Sass, it can be made more flexible.

...(The FAQs part is omitted here because it is more repetitive with the previous output)...z-index

The above is the detailed content of Mastering z-index in CSS. For more information, please follow other related articles on the PHP Chinese website!