Shulou(Shulou.com)06/03 Report--

CSS z-index attribute on the cascading order of how to deal with, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, hope you can gain something.

Many times encountered unexpected overlap errors of html page elements in the project, mostly due to the problem of z-index in the case of position positioning. In fact, the idea of solving similar problems is roughly the same every time. In the final analysis, the understanding of z-index is relatively vague, which can solve the problem but do not understand its cause, which leads to repeated errors. So I decided to figure out the overlap problem and straighten out the z-index.

After some practical understanding of search and comparison, the following starts with the background common sense and possible reasons of element overlap, and talks about the z-index order of position positioning elements. To sum up my current understanding, I hope it can also be of some help or inspiration to you who have encountered similar problems.

The background knowledge of the overlap of elements

(X) the elements in the html document are in the normal stream (normal flow) by default, that is, their order is determined by the order of the elements in the document, and there is generally no overlap (but specifying negative margins may overlap). When we specify a float float or position positioning for an element with css, the positioning of the element will change as follows:

1. Specify the float value left/right

The inline element also becomes invisible into a block element, which floats left or right away from the normal flow of the document until its outer edge touches the containing box or another floating box.

two。 Specify a position value of relative

It can be offset relative to its position in the normal flow, and the original space is still retained.

3. Specify a position value of absolute

The inline element also becomes invisible into a block element, and the element deviates from the normal flow of the document, offset from the nearest positioned ancestor element, and if the element does not have a positioned ancestor element, then its position is offset from the original containing block.

4. Specify a position value of fixed

The element deviates from the normal flow of the document, is offset from the browser window, and is fixed somewhere in the browser.

In all four cases, the elements in the document may be overwritten by floating / positioning elements to overlap.

Possible causes of element position overlap

1. Negative margin / float float

When margin is negative, the element is offset outward according to the guide. The reference lines of margin-left/margin-top are the left element / upper element (if there is no sibling element, the left inner / upper inner side of the parent element), and the guides of margin-right and margin-bottom are the right side of the border / the lower side of the border of the element itself. Generally, negative margins can be used for layout, but elements may overlap if they are not calculated well. The stacking order is determined by the location of the elements in the document, and the later ones will be on top.

Floating elements deviate from the normal flow of the document and may overwrite or obscure the elements in the document.

2. Relative/absolute/fixed positioning of position

When the position value is set to relative/absolute/fixed for an element, the offset of the element may overlap and the z-index attribute is activated. The z-index value controls the stacking order (stack order) of positioning elements perpendicular to the direction of the display (Z axis). When elements with high values overlap, they will be on top of elements with low values.

3. Overlap caused by window window elements

When parsing a page, the browser first determines the type of elements: window elements are better than non-window elements (that is, window elements will be overlaid on top of other non-window elements), and both non-window types can control the stacking order when activating the z-index attribute.

The Flash element belongs to the window window element

So if the flash element on the page overlaps with other elements, you need to first change the window of the wmode attribute embedded in flash (window, which by default will cause the problem mentioned above) to non-window mode: opaque (non-window opacity) or transparent (non-window transparency).

Select belongs to window type control under ie6.

In the same way, it also creates occlusion problems with window elements. The solution uses iframe (principle: select,iframe can not be covered by ordinary elements under ie6, select can be covered by ordinary elements, and iframe can be covered by ordinary elements) / div is used to simulate the effect of select. I usually append (appendChild) an empty child iframe to the div obscured by select. Set position:absolute out of the document flow space, width:100%;height:100%; covers the entire parent div, and Zmuri index iframe 1; make sure that the value is less than the z-index value of the parent div so that the parent div overlay is displayed on the iframe, and the select is overwritten with this iframe.

Talking about position Positioning and z-index usage

Use premise

Z-index can only be valid on elements whose position attribute value is relative or absolute or fixed.

Basic principles

The z-index value controls the stacking order (stack order) of positioning elements perpendicular to the direction of the display (Z axis). When elements with high values overlap, they will be on top of elements with low values.

Relativity of use

The z-index value only determines the stacking order of sibling child elements in the same parent element. The z-index value of the parent element, if any, defines the stacking order for the child elements (css version of the stacking "spelling father"). If the parent element containing the z-index value cannot be found upwards, it can be regarded as a free z-index element, which can compare the z-index value with the sibling positioning element of the parent element or other free positioning elements to determine its stacking order. If the z-index values of sibling elements are the same, the stacking order is determined by the location of the elements in the document, and the later will appear on top.

So if you find that an element with a higher z-index value is obscured by an element with a lower value, check the dom node relationship between them first, probably because its parent node contains position positioning elements that are activated and set the z-index value.

Also because of this relativity, it can also lead to compatibility problems with inconsistent browser performance. The reason is that elements with a position value of non-static under ie6 and 7 will implicitly add z-index:0 without setting the z-index value, while modern browsers such as Firefox/Chrome will follow the standard default z-index:auto will not produce a value.

It is also important to note that negative z-index also follows the principle of size comparison, but generally speaking, negative z-index will be overwritten by transparent body, resulting in problems with clicks and other event responses. Please use it with caution.

Graphical hierarchical display

In fact, the z-index we often come into contact with is just an attribute in hierarchical display, and to understand the principle behind z-index is essentially to understand the principle of hierarchical display. Let's use an example to understand the objects and properties involved in hierarchical display (z-axis, (root) stacking context, box, stack level) and the relationship between them.

HTML Markup

Description:

1. The corresponding box is generated for the element when the render tree is constructed, so div#d1- > d1veBoxMagol divSecretd2-> d2boxMagi divprincipd3-> d3rangboxprecinct divdistribud4-> d4riboxjinpl-> p1:box.

two。 For positioned box, if the z-index attribute value is not 0, a new stacking context will be created, and its descendant box will belong to the new stacking context.

3. Only the z-index of the same stacking context is comparable, that is, when discussing the z-index, you must specify which stacking context is the z-index under. As an example, although-9999 is smaller than 10, because d4:box and d1:box are on different stacking context, it is impossible to tell which box is closer to the user.

Cascading rule

The cascading rule is to determine which box is closer to the user.

1. Premise: boxes belongs to the same stacking context and the z-index is the same

Rule: according to the order of the element corresponding to box in the document tree, the latter is closer to the user (back-to-front) than the former.

CSS Code copies content to the clipboard

two。 Premise: boxes belongs to the same stacking context and the z-index is different

Rule: box with large z-index attribute value is closer to the user

CSS Code copies content to the clipboard

3. Premise: boxes belongs to a different stacking context, and stacking contexts has no grandchild / father-child relationship

Rule: boxes searches up along the parent box until the parent boxes belongs to the same stacking context, then compares the value of the z-index attribute of the parent boxes, and the box with a high value of the z-index attribute is closer to the user.

CSS Code copies content to the clipboard

D3 d2 d3

4. Premise: boxes belongs to different stacking context, and stacking contexts is grandchild / father-son relationship.

Rule: the box that belongs to the child stacking context must be closer to the user

CSS Code copies content to the clipboard

The role of z-index

In a nutshell: the z-index of the same stacking context is comparable, that is to say, when discussing the z-index, you must specify which stacking context is the z-index.

It has two functions: 1. Set the stack level of box under the stacking context to which it belongs

two。 When the z-index attribute value is not 0, a new stacking context is created in the box, and the descendant box of the box belongs to the new stacking context by default.

Note: the default value of z-index is auto, and the automatic assignment is 0. Therefore, no new stacking context is created by default.

Valves with z-index effect

The value of the z-index attribute takes effect only on positioned box, while the z-index of non-positioned box is always 0.

Perhaps you will cite the following counterexample:

JavaScript Code copies content to the clipboard

Console.log (window.getComputedStyle (document.getElementById ('D1')) ['zIndex']); / / output 10

Unfortunately, the above gets the value of the z-index property of non-positioned element div#d1, not the value of the z-index property of non-positioned box.

For positioned element, it assigns z-index to the corresponding positioned box, while non-positioned element does not.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.