Does w3c standards allow for same z-indexes

Question

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 conform to w3c standards) have the same z-indexes. Is this true? Can I have two <div> elements with the z-index of 3? Thanks.

Goldplate

You heard wrong. You can have the same z-index. – Byron

Answer 1

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.

Nominee

Answer 2

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

Sadoff

Answer 3

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.

Poundfoolish

Answer 4

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.

Yaker

Answer 5

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.

Yurev

Are you sure this is right? Most of these other answers say otherwise; and a few even include sources. – Snivel

@Kranu: Did you read the last few sentences? It does say you can set the same z-index and explains what happens when you do. – Yurev

Well you weren't very clear. You can also use <arbitrary> tags in HTML. That doesn't mean that it conforms to W3C standards. – Snivel

@Kranu: I don't understand what that has to do with this. – Yurev

Answer 6

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.

Adherent

This is wrong. The spec explicitly talks about how "collisions" should be rendered. – Poundfoolish

Answer 7

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.

Deliciadelicious