well! classmate! I heard you’re going to set up a blast Z-index?!!

Time:2021-7-31

well! classmate! I heard you're going to set up a blast Z-index?!!

Two days ago, I saw an article on a website:

well! classmate! I heard you're going to set up a blast Z-index?!!

This scene is a little familiar

In short, these remarks… Suddenly aroused my creative desire, soBenmei girlI’ve prepared an article for youGuide to the correct use of Z-index。 Take a pen and paper and make a small note!!

well! classmate! I heard you're going to set up a blast Z-index?!!

common problem

well! classmate! I heard you're going to set up a blast Z-index?!!

Emmm… So what are the reasons for these common problems?

.

.

.

.

.

.

.

.

.

well! classmate! I heard you're going to set up a blast Z-index?!!

.

.

.

.

.

well! classmate! I heard you're going to set up a blast Z-index?!!

As shown below:

well! classmate! I heard you're going to set up a blast Z-index?!!

Well, here comes our first knowledge point.

Parent and child

We compare the room on each floor to the parent element and you and Xiaoli to the child element.The Z-index of the parent element determines the range of the z-axis, and the Z-index of the child element determines the level within the range.

.second {
z-index: 2; /Xiaoli family on the second floor/

.xiaoli {
    z-index: 1;    /* Xiao Li's hierarchy*/
}

}

.first {
z-index: 1; /Your house on the first floor/

.you {
    z-index: 1000;     /* Your level*/
}

}

Although your level is 1000, the level range is limited to the first floor. So even if Xiaoli’s level is 1, Xiaoli will be above you.

well! classmate! I heard you're going to set up a blast Z-index?!!

So, when we finish typing the Z-index colon in the style code and prepare to write numbers in the future,

Think about who is the parent element of the current element?

What is its scope?

After setting, who can it work for?

(mmm… Talking about who will take effect) let’s continue to look at the pictures:

Please show our female No. 2 Xiaomei, your own sister. Because you are under the same roof (in the same parent), you can use Z-index for hierarchical arrangement.

well! classmate! I heard you're going to set up a blast Z-index?!!

.second {
z-index: 2; /Xiaoli family on the second floor/

.xiaoli {
    z-index: 1;    /* Xiao Li's hierarchy*/
}

}

.first {
z-index: 1; /Your house on the first floor/

.you {
    z-index: 1;     /* Your level*/
}

.xiaomei {
    z-index: 2;     /* Xiaomei's hierarchy*/
}

}

Of course, you can stand at the same height with your sister (old fellow iron, and a Z with a different style of wind is floating on top of the axis. We call it Angel little angel. The angle of the angel is our user’s view of the page.)

well! classmate! I heard you're going to set up a blast Z-index?!!

You can also stand at the same height as your classmates:

well! classmate! I heard you're going to set up a blast Z-index?!!

If you look at the above picture carefully, many character elements exist in the same layer. In fact, the front-end page we do is the same. Most elements can be in the same level, and only some individual elements (Xiaoli on the fourth floor, similar to the pop-up box in the page) will be in some special layers.

Now let’s assume that everyone’s XY coordinate value remains unchanged, only Z coordinate changes, and everyone owns a floor, but Xiaoli always stays at the top. Think about what it would look like from top to bottom?

Did you find that the effect seen by the little angel will be the same as that seen by many people on the first floor? Regardless of the size of the project, we don’t need so many Z-index layers.

However, if you only write a Z-index attribute, the hierarchy may not work.

Z-index should be used together with position (the value is non static). After position is set, the three-dimensional z-axis will be automatically formed.

Value method

Here are some suggestions for managing Z-index:

1. Z-index is set from 0 (very simple and plain, but the most practical and easy to maintain)

.a {
z-index: 0;
}

.b {
z-index: 1;
}

.c {
z-index: 2;
}

……

What do I suggest that old fellow iron makers not write Z-index too large? First, the old fellow can analyze the small projects they have done, and then go global search for “Z-index”. If you find a lot of “z-indexes”, try to simplify it:

Step 1: delete some redundant z-indexes (those that can be added or not).

Step 2: merge some different values (for example, if you have a Z-index of 7 and two z-indexes of 6, and you find that the 7 is still valid after it is changed to 6, change 7 to 6).

Step 3: arrange different values from small to large and replace them with single digits of 0, 1, 2, 3.

After these three steps, you will find that your Z-index level doesn’t need so much at all. No matter how big a project is, it is completely enough within 10. A high-quality web page is definitely not durian thousand layers. It really won’t have so many layers. In addition, this writing is conducive to later maintenance, because the numbers start from 0. If there are still many z-indexes, you need to consider whether the DOM structure should be optimized.

Of course, we can use this aspect flexibly. If the old fellow introduced the components of third party and the level of one element of the component is 1000, then we can add (minus) 1, 2, 3 on the basis of 1000.

well! classmate! I heard you're going to set up a blast Z-index?!!

2. Setting variables (method of managing Z-index in large projects)

$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;
$zindex-popover: 1060;
$zindex-tooltip: 1070;

As mentioned above, in modern large-scale projects, many developers will use Z-index in this way.

However, the difficulty of this method lies in:

**(1) Need to make early prediction: * * which components do we need to set Z-index for? Components are similar to drop-down boxes, pop ups, masks, etc. can we think of and take into account the hierarchical order between them, and the value difference between adjacent levels should be set as 10 or 20? What should I do if there is a new level between two adjacent levels during the project? Is it easy to maintain later? If a third-party component library is used, how to batch change these variables when the Z-index value of the component is 10000?

**(2) How to remember what each variable does: * * obviously, this code is extracted into a special style file, not scattered in the styles of each selector. Let’s settle down and think about whether we need to query this file every time we write to Z-index and find out which variable should be set? In addition, the English level of developers is actually uneven. Will it lead some people to find three hours of bugs due to misspelling? It is common for developers to forget to use their defined variables. If Z-index has various forms (both variables and numbers), how to integrate them in the end?

3. Set dynamic value

No matter what flowers Z-index plays, its essence is still as simple, that is, controlling those levels on the z-axis.

Setting the Z-index value dynamically means that the user triggers an operation, and then the Z-index level changes. When writing this method, pay attention to the result value of Z-index after triggering the operation.

Control hierarchy approach

Z-index is just one way to control hierarchy. So besides setting Z-index, what other methods can we use to control the hierarchy?

We can also use float, position, flex, opacity, transform, filter, clip path (CSS area class attribute), web media attribute, latecomer ranking and other methods to realize hierarchical arrangement( Latecomers come first: in HTML, the following elements can cover the previous elements with “margin top: negative number”)

The reason is that elements with the above attributes must rely on other levels to prove their existence, so the page will produce multiple layers and have the concept of hierarchy.

In fact, many big websites on the market now have some visible hierarchy problems. Therefore, this kind of attribute should be well controlled. If it can be less, it is less. It is safer to replace the more risky attribute.

So what is the legendary stacking context? If you want to explain it vividly, it is the floor in the example just above. The first floor you live in, no matter how many people there are, is a cascade context; Xiao Li lives on the second floor. Living alone is also a cascading context. Feel the following two pictures:

well! classmate! I heard you're going to set up a blast Z-index?!!

well! classmate! I heard you're going to set up a blast Z-index?!!

In addition, the parent element is a flex layout, and the child element can directly use Z-index to control the hierarchy.

well! classmate! I heard you're going to set up a blast Z-index?!!

So what’s the difference between Z-index: 0 and Z-index: Auto?

The element of Z-index: 0 is a cascading context element, while the element of Z-index: Auto is an ordinary element on a standard layer.

Front end personnel have a lot to learn and a wide range, but the page display is actually the part closest to the user. If we can overcome our impetuosity a little, patiently study the CSS problem for a few minutes, make a summary, and polish our project repeatedly. The quality of the whole page will be rapidly improved by several grades, and users can also directly feel the temperature of the whole page.

Well, having said so much, in fact, after reading the article, the real mastery still depends on everyone’s practice bit by bit in the project!

Come on, students!

If there are students canCombined with the actual projectGive me some constructive suggestions, I will be grateful!

In addition, if there are some sensitive words or logical errors in this article, please remind us! I will correct it in time! Sobbing ~

well! classmate! I heard you're going to set up a blast Z-index?!!

——————————————————————————————————————————————

reference:

https://www.smashingmagazine….

https://ishadeed.com/article/…