CSS Z-index detailed

CSS Z-index often appear a lot of inexplicable problems, the following Z-index properties to do a thorough analysis, this article reference "a CSS Z-index usage", and do a lot of demo, easy to understand the use of z-index.

First, what is Z-index?

The Z-index property determines the cascade level of an HTML element. The element cascade level is relative to the position of the element on the z-axis (relative to the y-axis of the x-axis). A higher Z-index value means that this element is closer to the top in the stacking order. This cascade sequence is presented along the vertical spool. To more clearly describe how Z-index works, this image exaggerates the relationship of the stacked elements in the visual position.

　　

Second, natural stacking sequence Demo

In order to better show the most basic cascade, look at the following demo, address Http://jsbin.com/yezisino/1/edit

HTML code:

<class= "Blue"></div><   class= "Green"></div><   class= "Red"></div>

Css:

. blue,.green,.red{width:200px;Height:200px; }. Blue{background:Blue; }. Green{background:Green;Margin-top:-100px;Margin-left:50px; }. Red{background:Red;Margin-top:-100px;Margin-left:100px; }

：

　　

Third, verification Z-index

In order to verify the role of Z-index, the above code is modified, the example is as follows

　　

The blue Green Red's z-index is set to 999 99 9, but it doesn't look like it has changed since Z-index only works in elements that are explicitly defined by absolute,fixed or relative, which are three positional attributes. So let's continue to make some changes to the CSS:

　　

, the order of display has been shown according to the size of the z-index we set.

Z-index settings for the child elements of multiple parent elements

On the basis of the original, we make some changes to the HTML and CSS, to verify that the parent element is different, the child elements set different z-index display effect

　　

It is obvious that when the child elements of different parent elements are displayed, they are rendered according to the z-index of the parent element.

Five, there is no z-index in the world

To have this kind of consciousness: absolute is a can independently property, its use can not relative , of course, also can not use z-index . By default, when an element has a non static - position attribute applied, it has a cryptic level that is above the normal element, without the additional setting of the Z-index property value.

However, the eye view of the real world, the abuse of Z-index attribute value and the abuse of absolute attribute value have a spell-as long as the absolute positioning/relative positioning of the place to set a Z-index value, to indicate their status. As a result, after n multiple z-index, after the site front-end substitution, the page z-index level confusion, in order to let the new addition element above display, regardless z-index of setting the value for 999 or 9999 so on. This is like the team, everyone wants to be the boss, the end result is a very taste of excrement.