w3c 标准是否允许相同的 z 索引答案

【问题标题】：Does w3c standards allow for same z-indexesw3c 标准是否允许相同的 z 索引
【发布时间】：2011-07-13 21:20:30
【问题描述】：

只是一个简单的问题，我找不到答案。我在某处听说您不能（当然可以，但它不符合 w3c 标准）具有相同的 z-indexes。这是真的？我可以有两个 z-index 为 3 的 <div> 元素吗？谢谢。

【问题讨论】：

你听错了。您可以拥有相同的z-index。

标签： html css z-index w3c w3c-validation

【解决方案1】：

这是不正确的。多个元素具有相同的 z-index 是有效的。引用W3C's CSS2 spec:

在堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后到前堆叠。

【讨论】：

【解决方案2】：

是的，z-index 不必是唯一的。它确实指定了它们应该如何处理：

在堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后到前堆叠。

请参阅CSS2 Spec 了解更多信息。

【讨论】：

【解决方案3】：

你可以有两个具有相同的索引。它们只会按照它们在 html 中出现的顺序分层。

【讨论】：

【解决方案4】：

带有 'z-index: 的定位元素 auto'（在第 6 层），浮动（第 4 层），内联块（第 5 层）和内联桌子（第 5 层），画得好像这些元素产生了新的堆叠上下文，除了他们的定位后代和任何子堆叠上下文参与当前堆叠上下文。

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

在 w3c 的这个例子中，他们讨论了第 5 层的两个项目，所以我认为他们允许这样做。我尝试时没有验证错误。

【讨论】：

【解决方案5】：

想想现实世界中的这个问题。你有一张分成正方形的电脑桌。假设 z 位置不能改变，是否可以将两罐汽水放在桌子上完全相同的 x 和 y 位置？不，两个易拉罐在现实中不能相互“重叠”。

当然，这是一台计算机，与现实相去甚远。但同样的前提也适用。您可以为两个对象设置相同的 z-index，考虑到所有对象默认为相同的 z-index，但浏览器会自动调整它们以适应它们在 HTML 中出现的顺序。所以最后，它们不再真正在同一个 z 位置了。

【讨论】：

你确定这是对的吗？大多数其他答案都不是这样。一些甚至包括来源。
@Kranu：你读过最后几句话吗？它确实说您可以设置相同的 z-index 并解释当您这样做时会发生什么。
嗯，你不是很清楚。您还可以在 HTML 中使用 <arbitrary> 标记。这并不意味着它符合 W3C 标准。
@Kranu：我不明白这有什么关系。

【解决方案6】：

Techism 在 z-index 上发布了指向 W3C 信息的链接。根据阅读他们所说的，元素的默认 z-index 是 auto，相当于“0”。这意味着如果一个元素没有指定 z-index，则它的 z-index 为 0，因此许多网站中的许多元素的 z-index 可能为 0，工作正常，并且符合标准。文中并没有说索引冲突有什么不好的地方，实际上是在讨论具有相同堆栈级别的元素。

【讨论】：

这是错误的。该规范明确讨论了如何呈现“碰撞”。

【解决方案7】：

这是没有意义的，您可以根据需要拥有许多类似的 z-index。看看我用 3 个类似的 z-index 做的例子。它验证成功。

将链接http://fiddle.jshell.net/Tnabq/show/粘贴到http://validator.w3.org/

上面的 jsfiddle 链接是我在 http://jsfiddle.net/Tnabq/ 做的 jsfiddle 示例的结果，没有所有 4 个窗口。

【讨论】：