When it comes to cascading rules in the CSS world, most people think of z-index, which translates to “Z-axis order.” In fact, regardless of the fact that z-index only works on some elements (such as positioning elements), any “element” without z-index support will have its own cascade rule, which is based on the Z-axis. Here we need to understand a concept, although we usually see the computer screen is the two-dimensional plane, but in fact the CSS “3 d” is the concept of the world, where he and our people of the world, after any point can have three mutually perpendicular line, of course, this is the concept of three dimensional space, and this article does not matter much.
Since are three dimensional world cascade relations, that we take our own world as an example, to talk about 05 Spring Festival Gala a program – thousand hands Guanyin.
The program “Thousand-hand Guanyin” well demonstrates the cascading relationship and “visual effect” of the three-dimensional world. Taking the picture plane as the XY plane, it visually presents the complete image of the first person, which is subject to the first person, and the people behind him constitute the Z-axis of the THREE-DIMENSIONAL world. Since most of the images of the people behind are blocked on the XY plane, only the arms presented by different angles can be seen. So you end up with the thousand-handed guanyin effect on the xy plane. (The axes of the three dimensional world are shown below. I dare not scribble in the picture above because I am afraid of literariness.)
From this example, we need to understand the first rule of the CSS 3d world: There are never two “elements” that overlap on the Z axis!
1. What is cascading context
Before we can understand the cascading rules of the CSS world, we must understand two key words – cascading context and cascading level. The first two sections of this chapter deal solely with these two key words. First, what is a cascading context? This is an official 3d concept in HTML, and it sounds a bit like the “block formatting context” (BFC) mentioned earlier. Let’s review what the block formatting context does: the element that declares the XXX attribute accidentally owns the XXX property. The same applies here. In the CSS world, as long as the current element has certain attributes (position:relative; Position plus z-index not auto) causes the current element to be “layered context”. So what does this “cascading context” give the current element?
On landing, we mentioned the concept of a barrier, here, also still apply, with cascade context feature element generates a “cascading ward”, all elements of the “cascading ward” internal will forever be bound in a certain period of z axis space inside, and never break the outer “cascading ward”. This is why sometimes our child element with z-index:9999 May still be overwritten by other elements, most likely because its parent element is behind the overlay. As shown in the following example:
<div class="box1">I am a supporting role</div>
<div class="box2">
<div class="son">I am the protagonist, and I am constrained by the cascading context of the parent element</div>
</div>
<style>
.box1{
position: absolute;
z-index: 1;
width: 200px;
height: 200px;
background: yellow;
opacity: 0.7;
}
.box2{
width: 400px;
height: 300px;
position: absolute;
z-index: 0;
background: green;
text-align: right;
}
.box2>.son{
position: relative;
z-index: 9999;
}
</style>
Copy the code
2. What are cascading levels
In the beginning, I put forward a concept of CSS in the world of any two “element” not on the z axis coincidence, because not all elements need to be “CSS cascade context”, but all elements need to have a order shown on the z axis, so for these are not “cascading context” elements, the problem of how to display cascade levels of help will be needed. In fact, we need to clarify the concept that all elements have a cascade level, which is a default “calculated value,” but since this value is ignored after the cascade context is declared, we usually only consider the cascade level within the same cascade context.
Having said all this, you may still not understand what a cascade level is, but let’s use an example to illustrate.
<div id="father">
<span id="son1">I'm the oldest son</span>
<span id="son2">I'm the second son</span>
</div>
Copy the codeIn the example above, we have two SPAN tags inside the parent container. The two span tags do not overlap, but they are not in the same Z-coordinate, and we can be sure that the second son is displayed in a better order than the first son because of the default level of stacking of ordinary elements. As to why the second son is above the first, more on that later.
3. Understand the two rules of element hierarchy
Now that we understand the concepts of cascading context and cascading level, we can talk more about the display rules of the CSS world, which is the cascading order of this section. Because all elements have their own rules for cascading, CSS has a detailed set of standards that govern the order in which elements are displayed on the Z-axis. As shown below:
As you can see, within the boundary of each cascading context, any internal elements are at a higher level than the background/border, so background/border forms the “floor” of the cascading context. The “ceiling” of a cascading context depends (in theory) on the size of the inner element’s Z-index: positive value.
In this hierarchy, we can notice that the default hierarchy is inline/inline-block elements, background and border elements, and the default hierarchy is some boxes for layout. This also conforms to CSS design standards. Graphic display is the main, followed by layout, and the most decorative background and border attributes.
In addition to the CSS2.1 standard mentioned above, the authors conclude that there are two golden rules for CSS cascading. When elements are stacked, their overlay relationships follow the following two rules:
(1) Who is bigger on: when there is an obvious cascade level identifier, such as the effective z-index attribute value, in the same cascade context binding, the one with the larger cascade level value overwrites the one with the smaller one.
(2) Coming from behind: When elements are stacked at the same level, the last element in the DOM stream overwrites the first.
The combination of these two principles explains the order in which any element is displayed when it overlaps.
4. Use examples to understand the cascading rules
In this chapter we have learned a lot about cascading rules in the CSS world. Now we need to do a comprehensive test with the concepts in the above three sections, mainly to verify that the CSS2.1 standard is still stable in Google Chrome.
The first test verifies: Inline >float> Block >background
In the test, negative margin is needed to make elements overlap. The test code is as follows:
<! -- Comprehensive Test 1 -->
<div class="father">
<span class="inline">The inline elements</span>
<div class="float"></div>
<div class="block"></div>
</div>
<style>
.father{
position: relative;
background: rgb(255.255.0);
}
.block{
background: rgb(255.0.0);
width: 100px;
height: 120px;
}
.float{
float: left;
background: rgb(0.255.255);
width: 100px;
height: 100px;
margin-left: 50px;
}
.inline{
margin-left: -100px;
background: rgb(0.255.0);
}
</style>
Copy the code
The result shows inline>float>block>background.
The second test verifies that a positive Z-index value > Z-index :0 is approximately equal to a negative z-index value > Z-index value
<! -- Comprehensive Test 2 -->
<div class="father">
<div class="zIndex-1">Negative z - index</div>
<div class="zIndexAuto">z-index:auto</div>
<div class="zIndex0">z-index:0</div>
<div class="zIndex1">Positive z - index</div>
</div>
<style>
.father{
position: relative;
background: rgb(255.255.0);
}
.zIndex-1{
position: absolute;
width: 100px;
height: 200px;
background: rgb(255.0.0);
left: 0;
top: 0px;
z-index: -1;
}
.zIndex0{
position: absolute;
width: 100px;
height: 100px;
background: rgb(0.255.0);
left: 0;
top: 100px;
z-index: 0;
}
.zIndexAuto{
position: absolute;
width: 100px;
height: 150px;
background: rgb(255.0.255);
left: 0;
top: 50px;
z-index: auto;
}
.zIndex1{
position: absolute;
width: 100px;
height: 50px;
background: rgb(0.255.255);
left: 0;
top: 150px;
z-index: 1;
}
</style>
Copy the code
At the level of cascade, z-index:auto and Z-index :0 cascade in the same order, so follow the principle of coming from behind to get ahead. However, z-index:0 and Z-index: Auto have essential differences in creating cascading context bounds, which will be discussed in detail in the next chapter. Those of you who are interested can test the cascading order of all the above elements mixed together. This chapter is mainly conceptual stuff to prepare for the next chapter.
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.
