Analysis on the z-index sequence of css--element overlap and position positioning

Original address:http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html

The non-expecting overlap error of HTML page elements is encountered many times in the project, most of which is the problem of z-index in the position positioning situation. In fact, every time the idea of solving similar problems is roughly the same, in the final analysis or the understanding of z-index is relatively vague, can solve the problem but not understand the cause, resulting in repeated errors ... Then decided to clarify the overlap problem, the z-index straighten out.

After some search and contrast practice understanding, the following is from the background common sense of overlapping elements and possible reasons, talking about the next position positioning elements of the Z-index order. I would like to summarize my current understanding and hope that you will have a little help or inspiration in having the same doubts about similar problems.

Background knowledge of element position overlap

(x) elements in an HTML document are in normal flow by default, i.e. their order is determined by the element's position in the document, which generally does not overlap (but specifies that negative margins may overlap). When we use CSS to specify float or position positioning for an element, the positioning of the element will change depending on the situation:

1. Specify the float value left/right

The inline element also becomes invisible to the block element, and the element moves away from the normal flow of the document, floating left or right until the outer edge touches the containing box or another floating box.

2. Specify the position value relative

It can be offset relative to its position in the normal stream, and the space originally occupied remains.

3. Specify the position value absolute

The inline element also becomes invisible to the block element, leaving the element out of the normal flow of the document, offset from the nearest positioned ancestor element, and its position relative to the original containing block if the element has no positioned ancestor element.

4. Specify position value fixed

The element is detached from the normal flow of the document, offset from the browser window, and pinned to a location in the browser.

In all four cases, the elements in the document will likely overlap by floating/positioning element overrides.

Possible causes of element position overlap

1. Negative margin/float floating

When margin is negative, the element is shifted outward from the reference line. The reference line for the margin-left/margin-top is the element on the left/the element above (if no sibling element is the left medial/upper medial of the parent element), and the guides for the margin-right and Margin-bottom are the border right side of the element itself/ Border lower side. A negative margin can generally be used to lay out a row, but without a good calculation it can cause overlapping elements. The stacking order is determined by the element's position in the document, and then appears on top of it.

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

2. Position's relative/absolute/fixed positioning

When you set the position value to relative/absolute/fixed for an element, the offset of the element may overlap, and the Z-index property is activated. The Z-index value controls the stacking order (stack order) of positioned elements that are perpendicular to the display direction (the Z-axis), where elements with large values overlap with small values.

3. Overlap caused by window element

When the browser parses the page, it first determines the type of the element: The window element is better than the non-window element display (that is, the window element is overwritten with other non-window elements), the same as the non-window type to control the stacking order in the activation Z-index property.

The flash element belongs to the window element

So if the flash element and other elements overlap on the page, you need to change the window of the Flash embedded Wmode property to the non-windowed mode: opaque (non-window opaque) or transparent (non-window transparent).

IE6 select belongs to the window type control

In the same vein, it also creates occlusion problems for window elements. Workaround use IFRAME (principle: IE6 The ordinary element cannot overwrite Select,iframe can override Select, ordinary element can overwrite iframe)/use DIV to simulate the effect of select. I typically append (appendchild) An empty sub-iframe to the div that is obscured by the Select, setting Position:absolute out of the document flow space, width:100%;height:100%, overwriting the entire parent Div, z-index:-1; Make sure that the value is smaller than the Z-index value of the parent div so that the parent Div overlay appears above the IFRAME, overwriting the select with this iframe.

Elementary introduction to position positioning and z-index use

Usage Prerequisites

Z-index can only be valid on elements with a position property value of relative or absolute or fixed.

Basic principle

The Z-index value controls the stacking order (stack order) of positioned elements that are perpendicular to the display direction (the Z-axis), where elements with large values overlap with small 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 stack "spelling daddy"). In cases where the parent element containing the Z-index value is not found, it can be considered a free z-index element, which can be compared to the Z-index value of the parent element's sibling position element or other free anchor element to determine its stacking order. If the Z-index value of the sibling element is the same, the stacking order is determined by the element's position in the document, and then appears above.

So if you find that an element with a larger Z-index value is obscured by elements with smaller values, check the DOM node relationship between them, mostly because the parent node contains position positioned elements that activate and set the Z-index value.

Also because of this relativity, there is a compatibility problem that causes inconsistent browser performance. The reason is that IE6, 7 below position value is non-static element is implicitly added z-index:0 without setting the Z-index value, and modern browsers such as Firefox/chrome will follow the standard default z-index:auto does not produce a value.

It is also important to note that negative z-index are also in accordance with the principle of size comparison, but generally negative z-index will be transparent body cover caused by the click of the event response problems, please use with caution.

Hundred say a case, give an example to briefly explain the next Z-index

HTML code

<div class= "PR" id= "one" >
    #one相对定位
    <div class= "Pa pa1" > #one的子元素pa1, Relative #one absolute positioning, #one是它的父元素, with. Pa2 as sibling elements </div>
    <div class= "Pa pa2" > #one的子元素pa2, Relative #one absolute positioning, #one是它的父元素, with. Pa1 as sibling elements </div>
</div>
<div class= "Pa" id= "Both" > #two绝对定位, and #one as sibling elements </div>

Default

None added Z-index value

CSS Code

. pr{position:relative;}
. Pa{position:absolute;}
div{width:200px;height:200px;border:1px solid #ccc; color: #fff; font:bold 14px \5fae\8f6f\96c5\9ed1;}
#one {background: #39f;}
#one. Pa1{background: #096; top:25px;left:20px;}
#one. Pa2{background: #969; top:90px;left:40px;}
#two {background: #669; top:165px;left:70px;}

Performance and Analysis

After positioning according to the element in the document's position, after the appearance will be on top.

Relativity Test

Add z-index:1 for #one, #one. PA1 plus z-index:30; #one. PA2 plus z-index:20; #two加上z-index:9;

CSS Code

. pr{position:relative;}
. Pa{position:absolute;}
div{width:200px;height:200px;border:1px solid #ccc; color: #fff; font:bold 14px \5fae\8f6f\96c5\9ed1;}
#one {background: #39f; z-index:1;}
#one. Pa1{background: #096; top:25px;left:20px; z-index:30;}
#one. Pa2{background: #969; top:90px;left:40px; z-index:20;}
#two {background: #669; top:165px;left:70px; z-index:9;}

Performance and Analysis

Because the Z-index value of the parent sibling element is #one< #two, #one determines its child elements. PA2 values of PA1 and. Z-index are covered by #two no matter how big. The. PA1 and. PA2, which are sibling elements of siblings, compare their z-index values, and the larger. PA1 are shown above.

IE6, 7 compatibility test

For #one PA1 plus z-index:10; #two加上z-index:1;

CSS Code

. pr{position:relative;}
. Pa{position:absolute;}
div{width:200px;height:200px;border:1px solid #ccc; color: #fff; font:bold 14px \5fae\8f6f\96c5\9ed1;}
#one {background: #39f;}
#one. Pa1{background: #096; top:25px;left:20px; z-index:10;}
#one. Pa2{background: #969; top:90px;left:40px;}
#two {background: #669; top:165px;left:70px;z-index:1;}

Performance and Analysis

Firefox/chrome, such as the modern browser (including ie8+), the parent element #one is not set Z-index value, the default is auto, at this time #one. PA1 is a free positioning element, so z-index the larger #one. PA1 is shown on the smaller #two. If the Z-index value of the #two is removed, the situation will be the same, setting the #one of the larger Z-index value. PA1 appears above the element that is not set z-index.

IE6/7, the difference is #one. PA1 is shown below the #two. Because the Z-index value is not set for the IE6/7 parent element #one, the z-index:0 is implicitly set, when the Z-index value #one 0 is compared to the #two 1, and the #two is larger, so #one's child elements, no matter how large the z-index, will be . If the Z-index value of the #two is removed, the situation is still, because the #one and #two without setting the Z-index value are added by default z-index:0; With a value that can be compared, the stacking order is determined by the element's position in the document in the same case, and appears in the following # The child elements of the #one, no matter how large or z-index, will be obscured by #two.

Simple Summary and Suggestions

The stacking order of ordinary elements is determined by the element's position in the document, and after that, the floating and negative margin layouts are calculated carefully, and note the particularity of the window elements; the stacking order between non-sibling relationships and non-parent-child relationship anchor elements is traced up to the parent element of the sibling relationship. Compare its Z-index value first, only descendants of the parent element with a large z-index value can exceed the parent element with a lesser z-index value and its descendants.

To reduce the complexity of z-index values when coding, I recommend that the value of the Z-index setting for the General page content class positioning element be less than 99 (if you do not use negative values), the Z-index setting of the ad class positioning element 100~500 The Z-index setting of the popup class positioning element, such as the announcement hint, is set to a value greater than 500, and for more complex positioning of nested pages, in order to avoid IE6/7 display differences, add z-index:0 or other values to the parent class anchor element dominance.

The above is my current network search book reference combined with practice after the understanding of the summary, if there are errors, please advise, if in doubt, welcome to discuss, if it is helpful, very honored, if there is a similar, shake hands ~

Analysis on the z-index sequence of css--element overlap and position positioning