Does w3c standards allow for same z-indexes

Just a quick question and I can't find the answer. I heard somewhere that you can't (well you can but it won't con开发者_StackOverflowform to w3c standards) have the same z-indexes. Is this true? Can I have two <div> elements with the z-index of 3? Thanks.

This is incorrect. It is valid to have multiple elements with the same z-index. To quote W3C's CSS2 spec:

Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

You can have two with the same index. they will just be layered in the order they appear in the html.

Yes, z-index does not have to be unique. It does specify how they should be handled though:

Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.

See the CSS2 Spec for more information.

Positioned elements with 'z-index: auto' (in layer 6), floats (layer 4), inline blocks (layer 5), and inline tables (layer 5), are painted as if those elements generated new stacking contexts, except that their positioned descendants and any child stacking contexts take part in the current stacking context.

http://www.w3.org/TR/CSS2/visuren.html#z-index

In this example from the w3c, they talk about two items on layer 5, so I think they allow it. No validation errors when I try it.

Think about this problem in the real world. You have a computer desk separated into squares. Is it possible to put two cans of pop at the same exact x and y positions on the desk, assuming that the z position cannot change? No. Two pop cans cannot "overlap" each other in reality.

Sure, this is a computer and nowhere near reality. But the same premise applies. You can set the same z-index for two objects, considering that all objects default to the same z-index, but the browser will automatically adjust them to fit the order they appear in your HTML. So in the end, they're not really on the same z position anymore.

Techism posted the link to the W3C's information on z-index. Based on reading what they said, the default z-index for elements is auto, which is equivalent to '0.' This would imply that if an element does not have a z-index specified, its z-index is 0, so many elements in many websites probably have a z-index of 0, work fine, and are standards compliant. The text does not say anything bad about collisions of the index, and in fact talks about elements having the same stack level.

This is none sense, you can have any many similar z-indexs as you want. Check out the example i did with 3 similar z-indexes. it validates successfully.

Paste the link http://fiddle.jshell.net/Tnabq/show/ at http://validator.w3.org/

The above jsfiddle link is the result of the jsfiddle example i did at http://jsfiddle.net/Tnabq/ without having all 4 windows.