The fact that no one told you about the z-index

Z-index problem is that many people simply do not understand how it works.
Everything described below, is in the W3C. Unfortunately, not all of it is read.

Problem description:

So, suppose we have a HTML code consisting of three <div> elements.
Each of them is in itself contains one <span> . And every <span> , in turn, has its background: red, green, and blue, respectively. Plus, every <span> absolutely positioned top left of the document so that it overlaps a bit following it <span> . First <span> has z-index , equal to 1, the other two <span> z-index is not specified.

Below is a basic HTML code css design.

 <div> <span class="red">Red</span> </div> <div> <span class="green">Green</span> </div> <div> <span class="blue">Blue</span> </div>

 .red, .green, .blue { position: absolute; } .red { background: red; z-index: 1; } .green { background: green; } .blue { background: blue; }

The example on jsfiddle

Objective: to make red <span> was behind the blue and green, while not violating any of the following rules:

You can not change the HTML markup
You can not change / add z-index to the elements
You can not change / add to the elements of positioning

The solution:

The solution is to add a little less transparency unit first <div> (parent red <span> ).
Here css, illustrating this:

 div:first-child { opacity: .99; }

The example on jsfiddle

Hmm, something's wrong here. And then do a transparency? How it may affect the order of overlapping elements? You think so? Welcome to the club!
Hopefully, in the second part everything will fall into place.

Stacking order of the elements:

Z-index seems very simple: the greater the value, the closer we will be the element that is element with z-index 5 will cover the item with a z-index 2, right? No, not really.
This is the problem z-index. It all seems so obvious that most developers do not devote enough time to study the issue.

Any element in the HTML document can be either in the front or in the background. It is known to all. The rules specify that order are clearly described in the specification, but, as I said above, not all fully understand them.

If the z-index property and positioning is not set explicitly, it's simple: the stacking order is the order of the elements in HTML. (In fact, a bit more complicated , but as long as you do not use negative margins to override line item, you will not run into extremes)

If you explicitly specify the positioning of the elements (and their children), these elements will cover the elements of a property without an explicit position. (Speaking of "clearly specify positioning" - I mean anything other than static, such as absolute or relative).

Finally, the case where the z-index set. For a start, it is natural to assume that items with higher z-index will be an item with a lower z-index, and any element with z-index set to be located above the element without a specific z-index, but it is not. First, z-index takes into account only the clearly positioned element. If you try to set the z-index is not positioned on an element, then nothing will happen. Second, the value of z-index can create contexts overlap. Hmm, things became much more complicated, is not it?

Context overlay

Elements with common parents, moving to the front or back together are known as the context of the overlay. Understanding the context overlay is key to understanding the z-index and stacking order of elements.

Each context has its own overlay root element in the HTML structure. When creating a new context for the element, all the children of the same fall in this context, and take their place in the stacking order. If the item is located at the bottom of one context overlay, no conceivable way will display it on another element in the context of the next overlay, located higher in the hierarchy, even with the z-index equal to one million.

New context can be formed in the following cases:

If the element - the root element of the document ( <html> element)
If the element is not statically positioned and z-index value is not equal to auto
If the element has an opacity of less than 1

The first two points seem logical and are generally known to most web developers.
The third item (transparency) is almost never mentioned, except, indeed, by the W3C.

Defining the position of the element in the imposition

In fact, the definition of a global order of placement of all the elements on the page (such as borders, backgrounds, etc.) is extremely difficult, and goes far beyond the scope of this article (again, I refer you to the specification ), but for the most part scenarios basic understanding is necessary.

The order in one context

The basic rules governing placement of elements in the same context provides (from back to front):

The root element of context
Positioned element (and its children) with a negative z-index (items with a high value placed before the elements with lower values, with elements of the same value are placed in the order they are in html)
Not positioned elements (arranged in the order they are in html)
Positioned elements (and their descendants) to the value of z-index of auto (arranged in the order they are in html)
Positioned elements (and their descendants) with positive z-index (items with a high value placed before the elements with lower values, with elements of the same value are placed in the order they are in html)

Note: Positioned elements with a negative z-index comes first on the context, therefore, they will appear behind all other elements. So, is it possible that they will end up with their parents, which in other circumstances is impossible. This effect will occur only if the parent is in the same context and not the root element of this context. A perfect example of such use is the example of Nicolas Gallagher with shadow without using images .

Global stacking order

Now, given the above and understand how it works, it is not hard to figure out where and how the items will be displayed.
The most important thing here to understand at what point formed a new context. If you set the z-index of a billion, but it still does not pop up, pay attention to its parent, consider all the wood elements higher in the stack, and if any of the parents form their own context, then your element with a million z-index no way will be on top.

Conclusion:

Remembering the original problem and the HTML code to it, I left the comments in each item to help you understand how to display items.

 <div><!-- 1 --> <span class="red"><!-- 6 --></span> </div> <div><!-- 2 --> <span class="green"><!-- 4 --><span> </div> <div><!-- 3 --> <span class="blue"><!-- 5 --></span> </div>

When you add transparency to the first <div> display changes as follows:

 <div><!-- 1 --> <span class="red"><!-- 1.1 --></span> </div> <div><!-- 2 --> <span class="green"><!-- 4 --><span> </div> <div><!-- 3 --> <span class="blue"><!-- 5 --></span> </div>

Now red <span> , which was designated as 6, was 1.1. I use a fractional notation to indicate that was formed a new context, and red <span> is the first item.

Hopefully now you understand why a red square is behind all the others.

The original sample contained 2 context, formed on the root element, and the red <span> . After installing the parent of a red transparent <span> we formed a third context, and its z-index was the only act within this new context. That is why the first <div> (the one to which we apply transparency) and his brother (not positioned and not on z-index) were placed in the order of the HTML structure. This means that the first <div> and all the elements within its context, were behind all the others.