


How to use CSS z-index attribute and the concept of hierarchical tree_html/css_WEB-ITnose
The z-index attribute in CSS is used to set the stacking order of nodes. Nodes with a higher stacking order will be displayed in a lower stacking order. In front of the node, this is our common understanding of the z-index attribute. At the same time, we are always unclear about the stacking order. Setting the z-index value to a large value may not necessarily display the node at the front. This article will analyze the use of z-index through some examples, and introduce to you the concept of z-index hierarchical tree.
order Rule
If the position attribute is not set on the node, the node located at the back of the document flow will cover the previous node.
Positioning rule
If position is set to static, nodes located behind the document flow will still cover the floating nodes in front, so position:static will not affect the covering relationship of nodes.
If position is set to relative (relative positioning), absolute (absolute positioning) or fixed (fixed positioning), such a node will overwrite nodes that do not have a position attribute set or the attribute value is static, indicating that the former is worse than The default level of the latter is high.
Without interference from the z-index attribute, according to the order rules and positioning rules, We can make a more complex structure. Here we do not set position for A and B, but set position:relative for A's child node A-1. According to the order rules, B will cover A, and according to the positioning rules A ' will override B.
Participation rules
Without the position attribute, add the z-index attribute to the node. z-index has no effect on nodes.
The W3C description of the z-index attribute mentions that the z-index attribute only affects the position of the node. It takes effect when the attribute is relative, absolute or fixed.
Default value rule
If all nodes have position defined :relative. Nodes with a z-index of 0 and no z-index defined are in the same level; but nodes with a z-index greater than or equal to 1 will cover nodes with no z-index defined; the value of z-index is Negative nodes will be overwritten by nodes with no z-index defined.
By inspection we also found that when position is set to relative, absolute or fixed, and not When setting z-index, the default value of z-index for IE8 and above and W3C browsers (hereinafter collectively referred to as W3C browsers) is auto, but IE6 and IE7 are 0.
From parent rule
If position:relative is defined for both nodes A and B, and the z-index of node A is larger than that of node B, then the child nodes of A must cover the front of the child nodes of B.
If all nodes define position:relative, the z-index of node A is the same as that of node B, but due to the ordering rules, node B covers the front of node A. Even if the z-index of node A is If the value is larger than the child node of B, the child node of B will still cover the front of the child node of A.
Many people set the z-index very large , 9999 and so on. If you don’t consider the influence of the parent node, it will be useless no matter how big it is. It is an insurmountable level.
Level tree rules
You may think that the sibling nodes in the DOM structure will be pulled out for comparison and hierarchy, but this is not the case.
We think that the position should be set to Nodes that are relative, absolute or fixed, and whose z-index is assigned an integer value, will be placed in a hierarchical tree that is different from the DOM, and the displayed level is determined by comparing the z-index in the hierarchical tree. If the above example is used If represented by a hierarchical tree, it should be as shown in the figure below.
In the figure, although the value of A-1 (z-index:0) is larger than that of B-1 ( z-index:1) is small, but because A (z-index:2) and B-1 are at the same level in the hierarchical tree, and the value of A is larger than B-1, according to the parent rule, A-1 is displayed in B-1 front.
Participation Rule 2
The participation rules mentioned above believe that as long as the position attribute of the node is relative, absolute or fixed, it can participate in the hierarchical comparison. In fact, it is not accurate. If all nodes have position:relative defined , and set z-index to an integer value. According to the parent rule, the level of the parent node determines the level of the child node.
In the example, A, B -1, C is the parent node, and the z-index value is the same. According to the order rule, C is before B-1, and B-1 is before A; and according to the parent rule, no matter what the z-index value of the child node is, C-1-1-1 is before B-1-1, and B-1-1 is before A-1.
If we add all parent nodes After the z-index attribute was removed, something strange happened. The display effect of IE6 and IE7 browsers remained unchanged, while the child nodes of W3C browsers no longer determined the level from the parent, but based on their own z-index.
According to the default value rules, there is a difference in the z-index default value of elements on IE6 / IE7 and W3C browsers. We believe that only when position is set to relative, absolute or fixed, and when z-index is assigned an integer value, the node is placed in the hierarchical tree; when z-index is the default value, only hierarchies are compared between document sibling nodes. In the W3C browser, A, B-1 and C- The z-index of 1-1 is auto and does not participate in hierarchical comparison.
In IE6 and IE7, because the default value of z-index is 0 , so it also participates in hierarchical comparison.
Although nodes with position set but no z-index do not participate in hierarchical tree comparison, they will still be in the DOM. Perform hierarchical comparison with sibling nodes.
Let’s modify the previous example. After deleting the position attribute of B-1, the W3C browser displays the following image. According to the positioning rules, A and C will be displayed in front of B-1; and according to the order rules, C will be displayed in front of A.
in IE6 and IE7 , because A and C-1-1 are set to position:relative, and the default value of z-index is 0, they also participate in hierarchical tree comparison, so the following effect is achieved.
Reposted from: How to use CSS z-index attribute and the concept of hierarchical tree

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
