What No One Told You About Z-Index

Don't we love CSS? it's so easy to do both complex things like 3D animations but also simple things like position something centered horizontally or vertically by just saying align:center, oh, sorry, it's margin: 0 auto, right, no? it's left:50% with a relative inside an absolute div, or was that an absolute div inside a relative span?<p>ok so doing it vertically is really easy, it's valign:middle, oh, wait, I'm confusing yucky table layout, it's much simpler, it's, ehm, line-height or something, or vertical-align, but only for text, sorry, silly of me, I just do top:50 and the relative inside absolute trick again (or vice versa, one sec let me check in JSFiddle),<p>Ok aligning might not be a good example, but it's so easy to have something snap to something else, like this DIV top right corner should always be on the buttom left of that other div, oh, can't do without some jQuery code? of course you can, let me go to codepen and show you for a sec, ok, never mind that, at least it's so easy to columns (more than exactly 3) that one of them is fixed width and the others are variable width, that's why we have float:left, float:right and well, nevermind.<p>But I can have a left navigation bar that will stretch to the bottom, or have a footer that will stay down when resizing, it's all easy and done without any workarounds or tricks or endless trips to stackoverflow or using zurb foundation / bootstrap.<p>So I'm surprised that a simple thing like putting something on top of the other got to be so complicated, well, you can't have it all, nothing is perfect<p>&#60;/rant&#62;

The key takeaway:<p><pre><code> &#62; New stacking contexts can be formed [… w]hen an element has an &#62; opacity value less than 1. </code></pre> I had no idea that was the case. The CSS 2.1 spec [1] notes that "other properties may introduce stacking contexts, for example 'opacity'". The CSS 3 spec [2] elaborates:<p><pre><code> &#62; Since an element with opacity less than 1 is composited from a &#62; single offscreen image, content outside of it cannot be layered &#62; in z-order between pieces of content inside of it. </code></pre> [1]: <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index" rel="nofollow">http://www.w3.org/TR/CSS2/visuren.html#z-index</a> [2]: <a href="http://www.w3.org/TR/2010/PR-css3-color-20101028/#transparency" rel="nofollow">http://www.w3.org/TR/2010/PR-css3-color-20101028/#transparen...</a>

Serious question: why do stacking contexts exist? They seem to defeat the whole purpose of z-indexes, which is a global way of determining what shows up in front of what else.<p>I'm trying to wrap my head around them -- I guess the main takeaway is, if you don't ever want to have to deal with them, then don't ever use nested elements where both have z-indexes?

Long text for just a few explanation. As a developer I hate reading those kind of tips since it doesn't go straight to the point. Here's my tl;dr :<p>&#62; the stacking order is the same as the order of appearance in the HTML<p>Actually this is false, as last in code is displayed on top<p>&#62; When you introduce the position property into the mix, any positioned elements (and their children) are displayed in front of any non-positioned elements<p>Use a "position:" and it will go on top of div not using it.<p>&#62; z-index only works on positioned elements<p>use "position:" to use "z-index" otherwise it won't work.<p>&#62; ...<p>I felt like the rest was unnecessary unless you plan to play a lot with z-index. Then you can get a better tutorial/article/documentation on it.

I've always wanted to get into web design, but every time I read an article like this, I get scared. Sometimes it seems like the web is nothing but hacks piled on top of hacks...

(I'm guessing that) since opacity is a "postprocessing operation"[1] it has to 'redraw' the entire div which causes it to fall back to it's parent order in the stack.<p>But I'm not sure if this is a fair assessment, as you're applying opacity to the div instead of the span.red, the element where the rule was applied. When adding opacity to the span the z-index stays intact<p>[1] <a href="http://www.w3.org/TR/css3-color/#transparency" rel="nofollow">http://www.w3.org/TR/css3-color/#transparency</a>

TL;DR an opacity value &#60; 1 creates a new stacking context.

To solve the issue of z-index only working on positioned elements, what I do on all new projects is set the following:<p><pre><code> * { position:relative; } </code></pre> This does two things. Allows me to set z-index values without hassle, and also allows me to set top/bottom left/right values.<p>Refer to my GitHub repo for the code for my base structure for new projects.<p><a href="https://github.com/garand/base" rel="nofollow">https://github.com/garand/base</a>

This seems more like a bug in opacity than anything. Logically, opacity should have no impact at all on layout positioning, only on blending. So this is more of a workaround created to speed up processing of elements with opacity less than 1 that introduces a design bug in the spec.

If the model were to stay the same, I'd like to see something like stacking-context:break to start a new stacking context with the targeted element as parent, stacking-context:inherit for children. Same as we have now, but with the option for manual control.

Also, don't expect Z-Index to work in IE6 with &#60;select&#62;. It's broken

This article should really be titled "What No One Told You About Opacity". I think all the z-index stuff is pretty well-understood. At least by people who consider themselves pretty good at css.

But I got the same result by assigning z-index 2 and 3 to the other colors.<p>So the results is the same, but the method is incorrect? does it matter? hmm<p><a href="http://codepen.io/anon/pen/DlyAv" rel="nofollow">http://codepen.io/anon/pen/DlyAv</a>