A different usage of z-index in CSS

Most CSS properties are easy to use. Often, when you use CSS properties on elements of markup language, the resulting results are rendered immediately as you refresh the page. Other CSS properties, however, can be complex and work only in a given environment.

The Z-index property belongs to the group that follows. Z-index is undoubtedly more prone to confusion and (developer psychological) frustration than any other attribute. But the funny part is that once you really understand z-index, you'll find it a very easy-to-use property, and it will help to solve many of the layout challenges.

In this article, we'll explain exactly what Z-index is, why it's so not understood, and discuss some of the problems it actually uses. We also describe some of the differences between browsers that are encountered, and those that are unique in existing versions of IE and Firefox browsers. This full-perspective article on the Z-index attribute will provide strong confidence and strong help for developers with good Foundation when using Z-index attributes.

What is it?

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, the above image exaggerates the relationship of the stacked elements in the visual position.

The Natural stacking order
In an HTML page, the natural stacking order (i.e. the order of elements on the z axis) is determined by many factors. The following is a list that shows the list items that are in a cascading environment (stacking context, which is temporarily not found in the appropriate Chinese translation, should refer to the cascading environment in which the stacked elements are located), which are at the bottom of this cascading environment. None of the items in this list have been given the Z-index property.
The background and border of the element creates a stacking context
Reference:
• Stacking contexts elements with negative values, arranged in the order in which they appear (the higher the back level is the higher)
• Not positioned, without floating block-level elements, arranged in the order in which they appear
• Not positioned, floating elements, arranged in the order in which they appear
• Inline elements, arranged in the order in which they appear
• Positioned elements, arranged in the order in which they appear
The Z-index property, when used correctly, alters the natural stacking order.
Of course, unless the elements have been positioned to overlap each other, the stacking order of the elements is not particularly noticeable. Below, the negative margin of the box is shown to illustrate the nature of the stacking order.

The box above is defined with a different background and border color, and the latter two are interleaved and define the top margin of negative values, so we can see the natural stacking order. The gray box is positioned first in the tag, the blue box is in the second place, and the Golden Row is the third. The negative margin applied explicitly indicates the fact that these elements are not set to the Z-index property; their stacking order is natural, or is the default, compound rule. The resulting interleaving occurs because of a negative margin.

Why does it create chaos?
Even though Z-index is not a hard-to-understand property, it can cause a lot of novice developers to get into chaos due to false assumptions. The reason for this confusion is that Z-index can only work in elements that are explicitly defined by the absolute,fixed or relative in the three positional properties.
To prove that Z-index only works on elements that are positioned, there are three boxes, which apply the Z-index attribute to try to break their natural stacking order.

The gray box has a z-index value of "9999", the blue box has a z-index value of "500", and the gold has a z-index value of "1". Logically, you would think that the stacking order of the three boxes would be reversed. But that's not the case, because none of these elements are set to the Position property.
The following is the same three box, respectively, are set position:relative, their z-index value or according to the above paragraph set.

Now the result is what we expect: the stacking order of these elements is reversed; the gray box is covered in blue and the blue is covered with gold.
Grammar

#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;
}

Again, the Z-index property works only in the elements that are defined by the position attribute. This has not been paid enough attention, especially for the novice.

using JavaScript
If you want to add the Z-index property dynamically to an element through JavaScript, the syntax is similar to most other CSS elements, which is to use "hump naming" instead of the hyphen in the CSS property, as shown in the following code.
var myelement = document.getElementById ("Gold_box");
MyElement.style.position = "relative";
MyElement.style.zIndex = "9999″;
improper parsing in IE and Firefox (compatibility issues)
In some specific cases, the parsing of the Z-index attribute has some minor inconsistencies in the IE6, IE7, and Firefox2 versions.
<select> elements in IE:
The <select> element in IE6 is a window control, so it always appears at the top of the cascade order without taking into account the natural stacking order, the Position property, or the Z-index. This is the question that is presented.

The <select> element appears at the top, it is set to "relative positioning" and the Z-index value is "1". The Golden Box is ranked second in this cascade order, and its z-index value is "9999". Because of the natural stacking order and the reason for the Z-index value, the Golden box in all the browsers we currently use will be on top, except IE6.

This IE6 bug resulted in a number of drop-down menus covering the <select> element that failed when the drop-down option was ejected. One solution is to use JavaScript to temporarily hide the <select> element until the drop-down item in the drop-down menu is retracted and then the <select> is displayed. Other approaches will involve the use of <iframe>.
The parent container that is located in the Ie6/ie7:
Because the parent container (element) is positioned, IE6/7 will incorrectly reset its stacking context. To demonstrate this somewhat complex bug, we'll place two boxes again, but this time we'll place the first box in a positioned element.

The Z-index value of the gray box is "9999", and the Z-index value of the Blue box is "1", and the two boxes are set position. So, the correct execution should be the gray box above the blue one.
But in IE6 and IE7, we see the blue box above the gray. This is caused by the location of the parent container that is also set by the gray box outer layer. These two browser errors will be "reset" to the stacking context of the parent container being located, but this should not be the case. The gray box has a very high z-index value, which is supposed to be on top of the blue box. Other browsers will parse the problem correctly.

Negative values in Firefox 2:
In the Firefox2 version, a negative Z-index value causes the element to be located behind the stacking context, not before the stacking context of an element such as the recognized background and border. The following shows a bug in Firefox 2.

Below is the HTML version above (limited to the current blog limit, do not have to be able to display the code demo like smashing Magazine Content section, need to see the original instance please go to the original article to view), if you are in Firefox 3 or any other browser currently in use, you will see normal parsing results: the background of the gray box (element stacking context) appears underneath all objects, and the text inside the gray box appears above the blue box.

General application of the show
Applying the Z-index property to elements in a page can be a convenient solution to a wide variety of layout challenges, while allowing designers to create more with cascading projects in their designs.
Staggered Sliding Door Menu:
A practical case for this CSS property:ctconlinecme This site creates a very good effect on the tab using the Z-index attribute and the clearly interlaced PNG image of "being clicked".

CSS Bubbles:
The Z-index property can also be used to implement CSS-based balloon bubbles, as shown below trentrichardson.com

Light Box:
If it weren't for the Z-index attribute, there wouldn't be so many good-quality light box scripts available for free, such as a plug-in for jquery FancyBox.

The light box script uses a translucent PNG image to darken the background and then takes a new element, often using a window-like p to place it in the front row. Both the PNG and the later p that overlay the screen use the Z-index property to ensure that the 2 elements are on top of the other elements of the page.
Drop-down menu:
A drop-down menu similar to Brainjar's classic Revenge of the menu Bar uses Z-index to make sure that the menu buttons and their drop-down items are at the top of the cascade.

Gallery effect Picture Show:
Combine the jquery animation and Z-index to create a slideshow or gallery-style superior effect. This demo from the usejquery.com website shows us The amazing combination of the two.

Polaroid Photo Gallery by Chris Spooner features a more powerful CSS3 with Z-index, creating a super cool effect that will be re-stacked when the mouse is over.

In Fancy Thumbnail Hover Effect , Soh Tanaka uses query-based scripting to change the assignment of Z-index.

Stu Nicholls's CSS Experiment:
Stu Nicholls The many examples of CSS in his website Cssplay. Here are some works on the Z-index property.
CSS image Map

CSS Games

CSS Simulation Framework

Enhanced cascading layouts:
This site ways The Z-index as a tool to enhance its template experience, extending the length and width of the year and date to the same and interwoven with the site's outer container, creating a very interesting effect.

Strange Web-pick:
Janko at Warp Speed This site uses the Z-index in the "bizarre net pick-up" section.

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

Summarize
Cascading relationships in CSS is a complex topic. This article is not intended to be a discussion of all the details of this topic, but rather an in-depth discussion of how z-index affects the stacking order of our web pages. In this case, we will find that this CSS property is so powerful when it is truly fully understood.
Beginners should now have a very good understanding of this attribute and avoid many of the problems that often arise in the course of their use. In addition, a basic developer will have a deeper understanding of how to use z-index correctly to avoid many layout problems, and open the door to creating more CSS artwork.