In the previous chapter, we mainly understood the concepts of cascading context, cascading level, and the two golden rules of CSS cascading. In this chapter, we will continue to explore the cascading rules of the CSS world.
1. Understand the cascading context in depth
Elements of a “cascading context” have the following characteristics:
(1) The default cascade level (Z-index: Auto) is higher than normal elements
(2) The mixing mode of elements can be blocked
(3) Can be nested, all internal elements (cascade context and all ordinary children) are subject to the external “cascade context”
(4) The elements of each “cascading context” are independent of their siblings, that is, only descendant elements need to be considered when cascading or rendering
(5) Each element of the “cascading context” is self-contained. When an element is cascaded, the entire element is considered to be in the cascading order of the parent context.
In the previous chapter, we looked at location properties to help create a “cascading context.” What other CSS properties or elements have a cascading context besides location properties?
(1) Root cascade context
The default position of the root element is relative, which explains why all elements in the page are in at least one “cascading bound”.
(2) Traditional cascading context (z-index is not auto and takes effect)
When using the z-index attribute, we need to note that it only works with certain CSS attributes. In the CSS2.1 world, we only need to note that z-index is used with positioning elements. In CSS3, however, there are other attributes that support the creation of cascading context bounds. I’ll list those properties in a second. In the previous chapter, I tested and verified that a positive Z-index >z-index:0 is approximately equal to a negative z-index:auto> Z-index. Why do I say z-index:0 is roughly equal to z-index:auto. The fundamental difference between the two is whether a cascading context is created. Z-index :auto is the default attribute for the positioning element, which is still a normal element, while Z-index :0 is a display declaration that, when in effect, creates a cascading context for the current element. The two are the same in “level” terms, i.e. they are at the same cascading level. However, creating a cascading context can have a significant impact on the internal elements. Say a lot of dry still don’t understand? Let’s test this out.
The following two pieces of code yield different results:
<div style="position:relative; z-index:auto;">
<! - beauty - >
<img src="1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:auto;">
<! Beauty - - - >
<img src="2.jpg" style="position:relative; z-index:1;">
</div>
<div style="position:relative; z-index:0;">
<! - beauty - >
<img src="1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:0;">
<! Beauty - - - >
<img src="2.jpg" style="position:relative; z-index:1;">
</div>
Copy the code
The two pieces of code produce completely different results. When z-index: Auto is in effect, the parent containers of both images are ordinary positioning elements, so the z-index reference of the image is the nearest “cascading boundary” (probably the root cascading context). Since the z-index of the beauty image is greater than the landscape image, the principle of “who is bigger” is followed. When z-index:0 takes effect, the parent container of both images creates a cascading context. The parent container is the same at the cascading level (both are Z-index :0), so it follows the principle of “coming from behind”. At this point, the internal Z-index is in a state where the elbow is not twisting the thigh, so it looks “invalid”.
(3) Cascading context in CSS3
As mentioned, CSS3 has added some new properties that allow you to create a cascading context directly. Here I highlight the ones I think are cool and list the others. CSS3 won’t be covered much in this chapter, and with all due respect, NEITHER will I.
- Z – the index values are not for auto flex (parent element display: flex | inline – flex).
- The opacity value of the element is not 1.
- The transform value of the element is not None.
- The mix-blending-mode element is not normal.
- The filter value of the element is not None.
- The isolation value of the element is ISOLATE.
- Will-change specifies the value of any of the above attributes.
- The -webkit-overflow-scrolling for the element is set to touch.
Note that opacity is not 1. When we make color gradient effects, the initial state of the element is always opacity 1 and transitions to a value <1. However, this change may cause unexpected situations in the element hierarchy. Therefore, it should be noted that the approximate value of opacity of the element itself should be set as high as possible, such as 0.99.
(4) Cascading context and cascading sequence
In CSS3, the CSS property z-index:auto can be used to create the CSS property z-index:auto. In CSS3, the CSS property z-index: Auto can be used to create the CSS property z-index: Auto. In particular, any element with z-index:auto effect on opacity, which is not 1, will improve the level of its own elements. This is a point to note, and I will make a separate mention of it to deepen my impression.
2. Understand and use z-index negative value
Z-index supports negative values, and when z-index values are in effect, the level of the element is only one level above the level of ornaments such as backgroud/border in the current cascading context and can be considered “lowest”. We usually use z-index when we want an element to be partially hidden. When using a negative z-index attribute, one thing to note is that the z-index attribute looks for the first element in the context of the cascade, so we need to pay attention to the current z-index element’s cascade bound. It can be said that there is no clear cascade bound z-index is playing rogue. (By explicit, I don’t mean browser explicit, but you need to know where the cascading bounds are, so the browser doesn’t get confused.)
<! -- z-index negative value -->
<div class="box">
<div class="content">I was hidden</div>
</div>
<style>
.box{
width: 200px;
height: 200px;
background: rgb(255.255.0);
}
.content{
width: 300px;
height: 300px;
background: rgb(0.255.255);
position: relative;
z-index: -1;
}
</style>
Copy the code
You can see that the text is missing, and the content element is partially obscured by box. This is because the default cascade bound for both elements is the root cascade bound, so the content level is lower than the box level and is overwritten. What if we add a cascading boundary to box?
<! -- z-index negative value -->
<div class="box">
<div class="content">I was hidden</div>
</div>
<style>
.box{
width: 200px;
height: 200px;
background: rgb(255.255.0);
position: relative;
z-index: 0;
}
.content{
width: 300px;
height: 300px;
background: rgb(0.255.255);
position: relative;
z-index: -1;
}
</style>
Copy the code
As you can see, the result is completely different. Now the content z-index:-1 finds that the first cascading bound is the box element, so no matter how negative the Z-index is, it can’t go beyond this bound. As you can see, the Content element overwrites the box background color.
With z – index negative element can be hidden features, we can complete the accessibility to hide, only need to cascade context one parent with an opaque background color is ok, he compared with clip has the advantage of no absolute positioning, while his deficiency is not universal applicability, the need to cooperate with other elements, to hide, to put it bluntly, It’s just expensive to maintain and people don’t know why you’re doing it.
That’s all we have to say about z-index in this chapter.
(1) Every element has its own stacking rules. To find the position of an element on the Z-axis, we need to find its stacking boundary first.
(2) Remember the golden rule of “Come from behind and catch up”.
(3) Encounter element hiding problem, do not check whether the setting of the cascading boundary is reasonable.
The next chapter is about the powerful text processing power of CSS. If you are interested, please click on it.
Never forget why you started, and your mission can be accomplished.
You can also scan the QR code to enter the blogger’s fan group (708637831). Of course, you can also scan the QR code to reward and directly keep a handsome blogger.
