Comments on: Z-Index And The CSS Stack: Which Element Displays First?

By: Steven Bradley

Steven Bradley — Tue, 08 Nov 2011 05:27:42 +0000

Thanks Liam. There’s more to z-index than it seems on the surface.

By: liam

liam — Mon, 07 Nov 2011 15:46:02 +0000

This is a great article I never realised how confusing z-index can become!

By: Are CSS Tables Better Than HTML Tables? | Van SEO Design

Are CSS Tables Better Than HTML Tables? | Van SEO Design — Thu, 13 Oct 2011 12:31:43 +0000

[...] table elements have different stacking contexts for the purpose of adding backgrounds to these different [...]

By: shivu

shivu — Mon, 05 Sep 2011 04:02:21 +0000

excelent artical steve..thank u

By: Steven Bradley

Steven Bradley — Fri, 29 Jul 2011 15:54:18 +0000

Glad I could help Elly. I know it was a frustrating 5 hours (believe me I’ve had those same 5 hours myself many times). On the positive side I bet you never have the problem again for more than a minute or two.

That context thing and the stacking order used to throw me off at times too. Most of it works as you’d probably expect even if you never read anything about them, but a few points are entirely intuitive.

By: Positively Elly

Positively Elly — Thu, 28 Jul 2011 23:28:36 +0000

OMG! Steven – You rock!!!

Thank you so much for taking the time to write this post – I’ve been stuck on this for the last 5 hours, read a dozen articles, and NO ONE even mentioned ‘Context’ – - –

After five hours, all I needed to do was move one div down one line (including the positioned and z-indexed element) in the preceding Context, and Viola! Like magic my stack orders lined right up

Thank you so much for sharing (and simplifying) the concept – I was pulling my hair out over here until I read your post, then five minutes later I had it all sorted out

By: Steven Bradley

Steven Bradley — Mon, 06 Jun 2011 01:11:24 +0000

You might have missed it, but this post is a follow up to one on positioning.

I don’t see why I specifically needed to show anything other than the z-index in the snippet, since it’s only there to illustrate a point with z-index. If the positioning needs to be shown then so would all the other code to create whatever layout is being created.

The snippet is just to illustrate one point and so only the code needed to illustrate that point was used.

By: noRiddle

noRiddle — Mon, 06 Jun 2011 00:31:46 +0000

Even though this post is a bit older already, I felt I had to intervene.
First of all your code snippet is missing the most important point:
There has to be a positioning for elements to which a z-index is assigned to make it work. You might consider that a matter of course but in a treatise or tutorial this should be apparent in the code snippet.
The position has to be other than static.
With that said we come to point two:
noone is wrong when stating “It may be worth mentioning that declaring position:static on an element does not register its z-index correctly.” since this is how it has to be.
Position static is the default position and is not supposed to take any z-index.

The z-index and stacking context issue is a widly misunderstood topic and there is a lot of texts with wrong theses on the internet.
Not at least this one: https://developer.mozilla.org/en/Understanding_CSS_z-index/Stacking_and_float
You can easily verify the results by using the provided code and test it.
e.g. in Firefox 4.x the DIV#3 appears above the DIV#1 as you can see here: http://jsfiddle.net/noRiddle/MntVN/

I’m currently working on a bigger test case with all kinds of different set ups to finally verify how z-index really works.
It is certainly much more complicated than many assume,
not mentioning browser issues.

noRiddle

By: Steven Bradley

Steven Bradley — Tue, 09 Feb 2010 00:39:12 +0000

Thanks for pointing that out. I wasn’t aware of the issue. Do you know if it’s specific to certain browsers or is it a general issue affecting all browsers?

As far as I know z-index should work the same on statically positioned elements. Should being the operative word. The spec says it should work at least.

If you can offer more details or point me somewhere that talks about this more it would be appreciated.

Thanks again.

By: noone

noone — Mon, 08 Feb 2010 06:18:27 +0000

It may be worth mentioning that declaring position:static on an element does not register its z-index correctly.