Use of Z-index in a CSS

Most CSS attributes are easy to use. Often, when you use CSS attributes for markup language elements, the results are immediately displayed as you refresh the page. Other CSS attributes are complex and can only work in a given environment.

The Z-index attribute belongs to the group mentioned above. Z-index is undoubtedly more frequent than any other attribute, leading to (compatibility) confusion and (developer psychology) frustration. But the funny thing is that once you really understand Z-index, you will find it a very easy-to-use attribute, and it will provide powerful help to solve many layout challenges.

In this articleArticle, We will explain exactly what Z-index is, why it is so unfamiliar, and discuss some issues about its actual use. At the same time, we will describe some differences between browsers, which are unique problems in existing IE and Firefox browsers. This comprehensive perspective on the Z-index attribute will provide strong self-confidence and powerful help for developers who have a good foundation to use the Z-index attribute.

What is this?

The Z-index attribute determines the level of HTML elements. The element level is relative to the position of the element on the Z axis (in contrast to the Y axis of the X axis. A higher Z-index value means that the element is closer to the top in the stacked order. The stacked order is displayed along the vertical line axis.

To clearly describe how Z-index works, the above picture exaggerated the relationship between stacked elements in the visual position.

Natural cascade order
In an HTML page, the natural cascade Order (that is, the order of elements on the Z axis) is determined by many factors. The following is a list. The list items are displayed in a stacked environment (stacking context. Currently, no suitable Chinese translation is found. It should be the stacked environment where the stacked elements are located). None of the items in this list are assigned the Z-index attribute.
The background and border of the element will create a stacking Context
Reference:
· Stacking contexts elements with negative values are arranged in the order in which they appear (the lower the level, the higher the level)
· Unpositioned and unfloating block-level elements are arranged in order of appearance
· Unpositioned and floating elements are arranged in the order of appearance
· Inline elements are arranged in order of appearance
· The elements to be located are arranged in the order of appearance
The Z-index attribute changes the natural cascade order when it is correctly used.
Of course, unless the elements have been positioned to display in overlapping forms, the order of the elements will not be particularly obvious. Below, the box with the negative margin is displayed to illustrate the natural cascade order.

The box above defines different background and border colors, and the last two are staggered and define the top margin of negative values, so we can see the natural cascade order. The gray box is in the first place in the mark, the blue box is in the second place, and the golden box is in the third place. The negative margin of the application clearly indicates the fact that these elements are not set with the Z-index attribute; their stacked order is natural, or the default, composite rule. This is because of the margins of negative values.
Why is it messy?
Even if z-index is not an incomprehensible attribute, it will confuse many junior developers with incorrect assumptions. The cause of confusion is that Z-index can only work in the elements that are explicitly defined as absolute, fixed, or relative positioning attributes.
To prove that Z-index can only work in the located element, there are three identical boxes. They apply the Z-index attribute to try to break their natural cascade order.

The gray box has the Z-index value of "9999", the blue box has the Z-index value of "500", and the golden box has the Z-index value of "1. Logically, you will think that the order of the three boxes will be reversed. But this is not the case because these elements are not set with the position attribute.
Below are the three boxes with the same position: relative, and Their Z-index values are still set according to the above section.

The result is what we expected: the order of these elements is reversed; the gray box is covered by blue, and the blue is covered by gold.
Syntax
# Grey_box {
Width: 200px;
Height: 200px;
Border: solid 1px # CCC;
Background: # DDD;
Position: relative;
Z-index: 9999;
}
# Blue_box {
Width: 200px;
Height: 200px;
Border: solid 1px #4a7497;
Background: #8daac3;
Position: relative;
Z-index: 500;
}
# Gold_box {
Width: 200px;
Height: 200px;
Border: solid 1px #8b6125;
Background: # ba945d;
Position: relative;
Z-index: 1;
}
Repeat, the Z-index attribute can only work in the elements with the position attribute defined. This has not been paid enough attention, especially for those new users.
Use JavaScript
If you want to use JavaScript to dynamically Add the Z-index attribute to an element, the syntax is similar to that of most other CSS elements, it is to replace the characters in the CSS attributes with the "camper name", just like the following Code As shown.
VaR myelement = Document. getelementbyid ("gold_box ");
Myelement. style. Position = "relative ";
Myelement. style. zindex = 9999 ″;
Improper resolution in IE and Firefox (compatibility issues)
In some specific cases, parsing of the Z-index attribute may cause some minor conflicts in IE6, IE7, and firefox2 versions.
<SELECT> element in IE:
The <SELECT> element in IE6 is a window control, so it always appears at the top of the stacked order without considering the natural cascade order, position attribute or Z-index. This is the problem.

<SELECT> when an element appears on the top, it is set to "relative positioning" and the Z-index value is "1 ". The golden box is placed in the second place in the stacked order, and its Z-index value is "9999 ". Because of the natural cascade order and the Z-index value, the golden box in all the browsers we currently use will be placed at the top, except IE6.

This IE6 bug causes many drop-down menus that overwrite the <SELECT> element to fail when the drop-down options are displayed. One solution is to temporarily hide the <SELECT> element using JavaScript, and display the <SELECT> element when the drop-down menu items are removed. Other methods involve using <IFRAME>.
Parent container located in IE6/IE7:
Due to the location of the parent container (element), IE6/7 will incorrectly reset its stacking context. To demonstrate the complexity of this bug, we put two boxes again, but this time we will place the first box in a located element.

The Z-index value of the gray box is "9999", and the Z-index value of the blue box is "1", both of which are set with position. Therefore, the correct execution should be a gray box covered in blue.
However, in IE6 and IE7, we can see that the blue box is on the gray. This is caused by the parent container of the outer gray box being located. These two browsers mistakenly reset the stacking context of the parent container to be located, but do not. The gray box has a very high Z-index value, which should be placed above the blue box. Other browsers will correctly resolve this issue.
Negative values in Firefox 2:
In firefox2, a negative Z-index value will place the element behind the stacking context, rather than before the stacking context element such as the accepted background and border. The following shows the Firefox 2 bug.

The following is the above html Version (limited by the current blog, the Code demo cannot be displayed in part of the content like smashing magazine, you need to view the original Instance, please go to the original article to view ), if you view it in Firefox 3 or another browser that is currently in use, you will see the normal parsing result: the background of the gray box (the base of the element stacking context) appear under all objects, and the text inside the gray box appears on the blue box.

Display of universal applications
Applying the Z-index attribute to elements on the page can easily solve a variety of layout challenges. At the same time, designers can use stacked projects in their design to create more.
Staggered sliding door menu:
A case study of the practical application of this CSS attribute: The ctconlinecme website uses the Z-index attribute and the clear and staggered PNG image for the tab "Being clicked" to create very good results.

CSS bubble:
The Z-index attribute can also be used to Implement CSS-based prompt bubbles, as shown in trentrichardson.com below.

Light Box:
If the Z-index attribute is not applied, there won't be so many excellent light box scripts available for free, such as fancybox, a plug-in of jquery.

The light box script uses a translucent PNG Image to darken the background, and then uses a new element. It usually uses a div similar to a window and places it in the front row. Both the PNG and the DIV that overwrites the screen use the Z-index attribute to ensure that these two elements are located on top of other elements on the page.
Drop-down menu:
Similar to the brainjar's classic revenge of the menu bar drop-down menu, use Z-index to ensure that the menu buttons and their drop-down items are located at the top of the stack.

Image Display of gallery effects:
Combining jquery animation and Z-index creates a slide or gallery-style excellence. This demo on usejquery.com shows us the amazing combination of the two.

Polaroid photo gallery by Chris Spooner adopts the combination of more powerful css3 and Z-index to create a super cool effect that will be re-coded when the mouse is scratched.

In fancy thumbnail hover effect, Soh Tanaka used the query-based script to change the value assignment of Z-index.

Stu Nichols's CSS experiment:
Stu Nichols explains many CSS cases in his website cssplay. The following are some works about the Z-index attribute.
CSS image map

CSS games

CSS imitation framework

Stacked layout of enhanced edition:
24 ways the website uses Z-index as a tool to improve its template experience, extending the length and width of the Year and date to the same and intertwined with the outer container of the website, it creates a very interesting effect.

Singular web bar:
The Janko at warp speed website uses Z-index in the "fantastic web excerpt bar.

Perfect full-page background image:
Chris coyier elaborated on this technology and applied it to the ringvemedia.com website. Apply the Z-index on the Content container to make sure it appears on the image that looks like a "background", but is not actually.

Summary
Cascading relationships in CSS are a complex topic. This article is not intended to discuss all the details of this topic, but to conduct an in-depth discussion on how Z-index affects the order of page stacking. As mentioned here, after being fully understood, we will find that this CSS attribute is so powerful.
Beginners should now have a good understanding of this attribute and will avoid many problems that often occur during their use. In addition, basic developers will have a deeper understanding of how to correctly use Z-index to avoid many layout problems, and opened the door for creating more CSS works.