CSS Web page production tutorial: Z

Article Introduction: Browser node display level is a laborious work, today you feel that a block will always be the top, but tomorrow because of the change in demand, suddenly appear B element needs to be top. Layer by layer up, one day looking back, found that a lot of blocks staggered together, and their value a larger than one, it is not clear the clue. I think Before fencing, it is best to position, Z-i

The Z-index property in CSS is used to set the stacking order of nodes, and nodes with a higher stacking order will appear in front of the nodes with lower stacking order, which is our general understanding of the Z-index attribute. At the same time, we are always unpredictable stacking order, the value of the z-index is very large and may not be able to display the node at the front. This article will use some examples to analyze the usage of z-index, and to bring you into the concept of Z-index hierarchy tree .

This week our team did an in-house sharing of technology, and pumpkin congee shared his understanding of CSS Z-index and the introduction of hierarchical tree concepts. This sharing of the site effect is very good, so I also will z-index and Hierarchy tree topic moved to the blog to talk about.

This article deals with several rules that affect the display level of nodes, all of which are listed in the example of the effects of the position property and the Z-index attribute on the page node hierarchy.

Order rules

If you do not set the Position property on the node, the node behind the document stream obscures the preceding node.

<div
						id="a">A</div>
<div
						id="b">B</div>

Positioning rules

If the position is set to static, the node behind the document stream still obscures the previous node float, so position:static does not affect the node's cloaking relationship.

<div
						id="a"
						style="position:static;">A</div>
<div
						id="b">B</div>

If the position is set to relative (relative positioning), absolute (absolute positioning) or fixed (anchored), such nodes will overwrite nodes that do not have the position attribute set or the property value is static, indicating that the former is higher than the default level of the latter .

<div
						id="a"
						style="position:relative;">A</div>
<div
						id="b">B</div>

In the absence of z-index attribute interference, we can make more complex structures according to the order rules and the positioning rules. Here we do not set position for a and B, but A-1 set position:relative for the sub node of a. According to the order rule, B overrides A and overrides B according to location rule A.

<div
						id="a">
	<div
						id="a-1"
						style="position:relative;">A-1</div>
</div>
<div
						id="b">B</div>

When do you use such an implementation to cover each other? Looks like the door, in fact, very commonly used, for example, E-commerce site Sidebar of the class display list can be used to achieve this technique.

The following figure is a site's category display area, two class purpose suspension layer covering the first class category list frame, while the first class purpose nodes cover two class purpose suspension layer. If you use CSS to achieve the display effect, the first class purpose frame is equivalent to a in the example above, the first Class purpose node is equivalent to A-1, class two suspended layer is equivalent to B.

Participation rules

We tried not to position the attribute, but to add the Z-index attribute to the node. Found that Z-index did not work on the node.

<div
						id="a"
						style="z-index:2;">A</div>
<div
						id="b"
						style="z-index:1;">B</div>
<div
						id="c"
						style="z-index:0;">C</div>

The description of the Z-index property by the consortium mentions that the Z-index property takes effect only when the position property of the node is relative, absolute, or fixed.

The Z-index property specifies the stack order of a element. Only works on positioned elements (position:absolute;, position:relative; or position:fixed;).

<div
						id="a"
						style="z-index:2;">A</div>
<div
						id="b"
						style="position:relative;z-index:1;">B</div>
<div
						id="c"
						style="position:relative;z-index:0;">C</div>

Default value Rule

If all nodes have a position:relative defined. A node with a z-index of 0 does not have a high or low level at the same level as the undefined z-index; However, nodes with z-index greater than or equal to 1 will obscure nodes that do not have a defined z-index; A node with a negative value of z-index will be overwritten by a node that does not have a defined z-index.

<div
						id="a"
						style="position:relative;z-index:1;">A</div>
<div
						id="b"
						style="position:relative;z-index:0;">B</div>
<div
						id="c"
						style="position:relative;">C</div>
<div
						id="d"
						style="position:relative;z-index:0;">D</div>

By checking we also found that when position was set to relative, absolute or fixed, and no z-index was set, IE8 the above and the Web browser (hereinafter referred to as the Web browser) the Z-index default value is AU To, but IE6 and IE7 are 0.

From the parent rule

If a, b node has defined position:relative, a node's z-index is larger than b node, then A's child node must be covered in front of the sub node of B.

<div id="a" style="position:relative;z-index:1;"> <div id="a-1">A-1</div> </div> <div id="b" style="position:relative;z-index:0;"> <div id="b-1">B-1</div> </div>

If all nodes have position:relative defined, the z-index of Node A is as large as the B node, but because of the sequential rule, B nodes are covered in front of Node A. Even if the Z-index value of a is larger than the sub node of B, the child node of B will still be overwritten in front of the child node of a.

<div id="a" style="position:relative;z-index:0;"> <div id="a-1" style="position:relative;z-index:2;">A-1</div> </div> <div id="b" style="position:relative;z-index:0;"> <div id="b-1" style="position:relative;z-index:1;">B-1</div> </div>

A lot of people will z-index set very big, 9999 what all come out, if do not consider the influence of the parent node, set big also useless, that is insurmountable level.

Hierarchy tree Rules

You may feel that sibling nodes in the DOM structure will be picked up to compare and determine the hierarchy, but it's not.

<div
						id="a"
						style="position:relative;z-index:2;">
	<div
						id="a-1"
						style="position:relative;z-index:0;">A-1</div>
</div>
 
<div
						id="b">
	<div
						id="b-1"
						style="position:relative;z-index:1;">B-1</div>
</div>

We think that setting the position at the same time as relative, absolute or fixed, and z-index a node that is assigned a whole number of integers, is placed in a hierarchy tree that is not the same as DOM, and in the hierarchy tree, the level of the display is determined by contrasting z-index . The above example should be represented by a hierarchy tree, as shown in the following figure.

Although the value of A-1 (z-index:0) is smaller than B-1 (z-index:1), because a (z-index:2) and B-1 are at one level in the hierarchy tree, and the value of a is larger than the B-1, the A-1 is shown in front of the B-1 according to the parent rule.

Participation Rule 2

The participating rules mentioned above assume that as long as the position attribute of the node is relative, absolute or fixed, it is not accurate to participate in the level comparison. If all nodes have position:relative defined, and the Z-index is set to an integer value, the hierarchy of the parent node determines the level of the child node, based on the parent rule.

<div
						id="a"
						style="position:relative;z-index:0;">
	<div
						id="a-1"
						style="position:relative;z-index:100;">A-1</div>
</div>
 
<div
						id="b">
	<div
						id="b-1"
						style="position:relative;z-index:0;">
		<div
						id="b-1-1"
						style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div
						id="c"
						style="position:relative;z-index:0;">
	<div
						id="c-1">
		<div
						id="c-1-1">
			<div
						id="c-1-1-1"
						style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

In the example of a, B-1, c-1-1 as the parent node, the Z-index values are the same, according to the order rules, c-1-1 before B-1 before A; And according to the rule from the parent, regardless of the z-index value of the child node, c-1-1-1 before B-1-1, b-1-1 before A-1.

If we remove the Z-index attribute of all the parent nodes, the weird thing happens. The IE6 and IE7 browsers display the same effect, and the child nodes of the Web browser are no longer from the parent, but the hierarchy is determined by its own z-index.

<div
						id="a"
						style="position:relative;">
	<div
						id="a-1"
						style="position:relative;z-index:100;">A-1</div>
</div>
 
<div
						id="b">
	<div
						id="b-1"
						style="position:relative;">
		<div
						id="b-1-1"
						style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div
						id="c"
						style="position:relative;">
	<div
						id="c-1">
		<div
						id="c-1-1">
			<div
						id="c-1-1-1"
						style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

Depending on the default value rule, the IE6/IE7 and the elements on the Web browser have the difference between z-index default values. We believe that the node is placed in the hierarchy tree only when the position is set to relative, absolute or fixed, and the Z-index assigns an integer value; When Z-index is the default value, only the hierarchy is compared between the document sibling nodes. In the Web browser, a, B-1, and c-1-1 Z-index are all auto and do not participate in the hierarchy comparison.

In IE6 and IE7, because the default value of Z-index is 0, it also participates in a hierarchy comparison.

A node that has a position but no z-index does not participate in the hierarchy tree comparisons, but also in the DOM with sibling nodes.

<div
						id="a"
						style="position:relative;">
	<div
						id="a-1"
						style="position:relative;z-index:100;">A-1</div>
</div>
 
<div
						id="b">
	<div
						id="b-1">
		<div
						id="b-1-1"
						style="position:relative;z-index:10;">B-1-1</div>
	</div>
</div>
 
<div
						id="c"
						style="position:relative;">
	<div
						id="c-1">
		<div
						id="c-1-1">
			<div
						id="c-1-1-1"
						style="position:relative;z-index:1;">C-1-1-1</div>
		</div>
	</div>
</div>

We have modified the previous example, after the B-1 position attribute is deleted, the Web browser displays the following image. According to the positioning rules, A and C-1-1 will be shown in front of the B-1; According to the order rules, C-1-1 is also shown in front of A.

In IE6 and IE7, because A and c-1-1 set position:relative, and the default value of Z-index is 0, it also participates in hierarchy tree comparisons, so it has the following effect.

Summarize

Browser node display level is a laborious work, today you feel that a block will always be the top, but tomorrow because of demand changes, suddenly appear B elements need to be top. One layer on top of the stack, one day looking back, found that a lot of blocks staggered together, and their value a larger than one, it is not clear clue. I think before the fencing work, it is best to first position, z-index and level of the relationship between the understanding, so as to avoid endless.

In addition, do not have to do, do not use JavaScript to compute Z-index, and the Z-index of a node set to the highest level of all nodes.

Because the length is too long, this article only from the node attribute angle discussion, does not involve the select and the IFrame and so on special page node consideration, if has the opportunity next time for everybody to share.