一位名叫 Arjan 的读者最近给我发邮件，告诉我一个 The Printliminator 不起作用的网站。他们追溯到该网站使用了一堆“叠层”，并且 z-index 值高得离谱。Printliminator 通过绝对定位和 10000 的 z-index 值注入页面，我已经认为这个值高得离谱了。那么，我们是否应该开始玩这个游戏，然后使用更高得离谱的 z-index 值？我选择不玩。
Arjan 报告说他看到了“z-index: 1e+07”的值（我认为这是他使用的 DOM 检查器为了更易读而进行了简写，但意味着 1×107）。在 Safari 的 Web 检查器中，我看到了 z-index: 1.62909e+07；Firefox/Firebug 显示给我的是 z-index:12600322；谁知道实际生成这些值的代码中是什么。由于该网站看起来有点非法，所以我暂时不会提供链接。
不值得玩的游戏
也许这个网站之所以使用如此高的数字，是因为他们试图通过巨大的 z-index 值覆盖他们无法控制的某些外部内容。然后，外部来源可以提高他们的数字以确保它们再次处于顶部，从而形成一个恶性循环。一个愚蠢且无法获胜的游戏。
我可以预见到另一种技术出现，即放置外部内容的 JavaScript 会轮询页面上的所有元素以获取它们的 z-index 值，并将其设置为更高的值。然后，试图对抗它的网站也会进行定时轮询，这可能会导致类似于 CSS 抖动人 的奇怪闪烁。
渲染影响？
是否有人确切地知道处理极高数量级的 z-index 值是否会给渲染引擎带来更大的压力？我猜测它会带来一些压力，更不用说 CSS 文件中多出的所有字符了。
更合理的 z-index 值
我实际上喜欢使用“稍微”较高的 z-index 值。我喜欢以 100 为增量来分隔它们。因此，如果您有三个需要堆叠并知道顺序的元素，第一个元素将具有 z-index: 0;，第二个为 100，第三个为 200。这样您就有一定的空间，如果出于某种原因将来需要在第二个和第三个之间放置某些内容，您可以使用 110。如果您使用 1、2 和 3，则没有这种选择。我还通常避免使用负值，因为您必须小心，如果不需要，则某些元素不会被 body 或 html 元素覆盖。
像 9999 这样的数字可以用作“绝对最高的数值”，由于不同的编号约定，它在视觉上是可以识别的。
您在使用 z-index 时是否有自己的系统？
确实如此。我通常使用 10 或 50 的增量，但 100 也很好。我通常不会达到 9999。我也见过这样的网站。
z-index: 9999; 是搜索引擎的 hack。
你的意思是？这对 SEO 不利吗？
10 也很有道理。
z-index 为无限大，然后有人会设置 z-index 为无限大 +1！
但你绝对正确，使用合理的数字！
无论如何，为什么要使用 print liminator 打印非法页面呢？;)
我与 z-index 打交道的次数不多，但当我看到其他人使用 10000 及以上时，总是觉得有点奇怪。
我同意你们的观点，很明显，1、2、3 不会为“重新思考”留下太多空间，但 10、50 或 100 的块我认为已经足够了，更不用说更容易跟踪了！
我实际上使用 1、2、3、4、5 等值。
我不明白添加不必要的零有什么意义（我在 Photoshop 中不会添加数百或数千个空层……）
是的，但是 Photoshop 图层允许您通过简单的拖放来重新组织结构。如果您没有考虑到未来的修改，重新排列 10 个 z-index 值为 1-10 的图层需要花费更长的时间。
说得对，谢谢你的提示。
我通常避免使用负 z-index 值，因为 Firefox 往往（或曾经）会出现问题，否则我也会尝试遵循 +100 的增量……尽管我通常从第一个元素的 z-index 5 开始。
即使以 100 为间隔的偶数值也似乎有点多。我通常坚持以 10 为间隔的值。我极不可能需要在 10 的值之间分层 9 个项目。
我一直希望在 CSS 中有一种方法可以声明：“将选择器 X 匹配的所有元素放在选择器 Y 匹配的所有元素之上。”
这可以防止许多这些愚蠢的值。与所有选择器一样，冲突的声明将通过特异性以及 !important 声明来解决。
但是，当您收到不合理的指令时会发生什么情况？
例如：
x over y;
b over y;
b over x;?
解析器遵循自上而下的顺序，移动最少的位数以满足每个条件
X over Y
X
Y
B over Y
X
B
Y
B over X
B
X
Y
如果稍后在同一样式表中出现新的声明（Y over X），则顺序将被覆盖为
BYX
没有冲突。
我从未真正大量使用过 z-index，但当我使用时，我更喜欢 10 而不是 100 的间隔。您很少需要在两个现有层之间插入超过 10 个层。
我通常使用 5 或 10 的增量，但有时您只需要超过 9000！
我认为我们应该重新思考如何处理这个问题的方法。z-index 的当前工作方式是，元素的顺序相对于数字零。然后，元素会根据 z-index 的值出现在此“零屏障”的前面或后面。如果值为 10，则元素将在第十步前面，并且中间只能有 9 个其他元素。如果是 -20，它将在第二十步后面，依此类推。
我们只能使用整数这一事实意味着两个元素之间或一个元素与“零屏障”之间的位置数量是有限的。要增加它，我们必须更改元素的 z-index 值（例如，从 10 到 11）。这就是我们使用 10000 等疯狂值的原因。
将z-index的值允许使用实数而不是仅限整数可以解决这个问题。例如，如果我们有一个z-index为2的元素和另一个z-index为3的元素，我们可以使用z-index 2.5插入一个元素在它们之间（注意，现在这不起作用，因为我们只能使用整数）。这样做的问题是，它会变得非常混乱，我们仍然会遇到像1.5252这样的疯狂值。
我们真正需要的是一种方法来安排元素之间的相对位置。我不确定我们如何实现这一点以及有哪些可能性。我想到的是这个
@z-index {
back: #foo
front: #bar, #foobar, span#example;
}
我在这里的想法是将定位元素排列到两个数组中。一个位于非定位元素的后面，另一个位于非定位元素的前面。这样，元素彼此之间是有序的，并且它们之间有无限个位置。
我相信还有更好的解决方案，希望其中一个能进入CSS4。
我非常喜欢你的想法，稍微改进一下，它将成为一种非常方便的z-index使用方式。
太搞笑了。除了我之外，每个人都应该将Z索引保持在10,000以下。我是Chris Coyier，我特此宣布，9,999将是允许的最高z-index，除了我的printliminator工具。在过去的一年里，你从很棒的CSS助手变成了自以为是的家伙。伙计，找回你的谦逊，因为你的网站和你的教学都受到了影响。你在帖子末尾提出的虚假问题是一种透明的评论钓鱼博客101技巧，而不是你真正地与你的受众互动。
已注意。但是，我计划继续发表我的意见并征求你们的意见。不喜欢，就别来这里。（尤其是明天，你会讨厌明天的）。伙计。
说得好！
我有一根棒球棍上刻着这个家伙的名字。哈哈。
抱歉多次发帖。
Jason，你知道为什么哲学是一种如此普遍的方法吗？
前几天我突然顿悟，当时我问“哲学家整天都在做什么，哲学专业的收益在哪里？”
回复是：
“哲学不是为了解决任何具体的问题，而仅仅是为了促进思考。”
去读点哲学吧，伙计，或者我的棒球棍还在那里。:) jj
哈哈。谁惹你生气了？XD
哇！Jason，你很生气吗？忽略这个喷子，Chris，继续努力！
好吧，是的，我有点太像喷子了，但我坚持我的观点。老实说，在过去六个月左右的时间里，我确实感受到了语气的变化。我一直是这些视频教程和网站的忠实粉丝，从一开始就关注，但现在我越来越反感。过去一直是一种“嘿，我们都在一起”的态度，但现在感觉更紧张，更像是“我只是为了发帖而发帖”。
Chris，“如果你不喜欢，就别来这里。”好的。没问题。你可能甚至没有察觉到我在你的作品中提出的任何批评。你已经积累了一定的设计师名人地位（这是当之无愧的），这很棒，但这似乎偷走了你最初的优点。
我想知道如果我更优雅地提出这个话题，我的批评是否还会遭到如此激烈的反驳。好吧，吸取教训。希望后者能找到回这里路。
虽然我并不完全同意Jason的观点，但我们不应该因为不喜欢某个人的观点就压制它。他们可能确实有一些值得思考的观点。
感谢你发布它以及这篇文章，Chris。虽然我偶尔也会使用一个“天外飞仙”的z-index。
我不经常使用z-index，但当我使用时，我通常会以1000为增量。有时我只是选择（不那么）随机的数字：0、14、42、69、128、256……
当你说“合理”时，我以为你在说人们通常使用无理数作为z-index值：P
z-index: π;
10、20、30、40 是一种不错的方式，因为你总是可以在后面添加 1-9。很棒的帖子。
#header, #page-wrap {
z-index: ∞;
}
:D
如果我想把某些东西放在上面呢？:D
这是你想要的那种东西，但有时这是不可能的。
对于下拉菜单，你希望它显示在所有内容之上，对吧？然后你有一个光线窗口，它应该显示在所有内容之上，然后你在底部有一个浮动栏，它显示在所有内容之上，除了光线窗口，最终这会变成一团糟。
对于一个刚开始的网站，它应该建立一个z-index“标准”，但对于那些可能一开始没有考虑使用z-index的大型网站来说，这可能是一个问题。
在我看来，使用较高的z-index没有错，但绝对不要超过9999。
我几乎从不使用z-index。虽然如果我使用，我通常会将主要框架以1000为间隔划分（例如，页眉、主要内容、页脚）；但只有在其中任何一个需要时才会这样做（例如，顶部的一个“固定位置”页眉要么位于代码的底部，要么位于顶部并带有z-index；我会选择后者）。
其他任何内容都以100为增量。
因此，假设主要元素的数量低于5，我永远不会超过4900。
顺便说一句：使用php + css（或间接使用这种组合的现有引擎），你可以创建变量。
例如
[? $zHeader = 1000;]
#header {
z-index: [? echo $zHeader; ?]
}
#nav {
z-index: [? echo $zHeader+10 ?]
}
—
Gringer
*修复*
例如
[? $zHeader = 1000;]
#header {
z-index: [? echo $zHeader; ?]
}
#menu-effect {
z-index: [? echo $zHeader-10 ?]
}
#nav {
z-index: [? echo $zHeader+10 ?]
}
甚至可以编写一个函数来跟踪迄今为止使用的最大数字。
[?php
$maxZI = 1;
function zI($element, $increment, $newval){
if ((empty($increment)) { $increment = 1; }
if ($element == "max")
{
$maxZI = $maxZi+$increment;
echo $maxZI;
}
elseif ($element && $newval && $increment)
{
${$element} = $newval+$increment;
echo $${$element};
$maxZI = maxZI+$increment;
}
elseif ($element && $increment)
{
${$element} = ${$element}+$increment;
echo $${$element};
$maxZI = maxZI+$increment;
}
elseif ($element && $newval)
{
${$element} = $newval;
echo $${$element};
}
else { // 什么也不做 }
}
例如，你将使用
#elementOne{
z-index: [? Zi('elementOne', ,500) ?] // 输出 500
}
#elementOneChild{
z-index: [? Zi('elementOne', 10) ?] // 输出 510
}
#bossElement{
z-index: [? Zi('max') ?] // 输出 511
}
#bossElement2{
z-index: [? Zi('max') ?] // 输出 514
}
好的，那里有一些错误，但你理解我的意思:-)
当然，在生产网站上，你希望提前生成CSS……
我喜欢0、100、200等的想法……这似乎比我通常使用的9999更合理。顺便说一句，我已经有一段时间没有访问这个网站了；我喜欢新的设计！对于一个网站来说，保持相同的颜色/布局并仅仅改进细微之处是非常罕见的。非常好。
我是不是唯一一个从未使用过z-index的人？
很可能：P
嗯，也许你可以将你的printliminator放在HTML或BODY元素的margin-top中。
虽然这是一个相当合理的解决这个问题的方法（许多人都在使用），但在我看来，它对设计进行了过多的修改，并且在用户体验中留下了一个坑，一些我使用的元素附加组件在激活/停用时会改变页面布局，这让我很困扰。
关于这个问题——z-index的无计划激增：9823492；简直是荒谬，绝对要使用增量系统，在一个理想的世界里，如果所有设计师都遵循最佳实践，这个问题就不会存在，那些不遵循的人只会引发像这样的偏题讨论，并希望为你节省一张纸。
这纯粹是我个人的看法，但我认为 z-index 属性是一种很不好的实践，尽管它符合 W3C 标准。我更倾向于尽可能使用自然的堆叠顺序。并且尽可能少地使用 z-index，也许用于气泡或覆盖图标链接。
这主要是由于 IE 中 z-index 的不兼容性。
大家怎么看？
我们需要某种动态 CSS。稍等一下！
我以前很讨厌 z-index，那时我是一个“学习者”设计师，我会从网站上下载下拉菜单等的脚本。我的 Flash 会开始出现在菜单的顶部，或者我的菜单会跑到所有内容的后面等等。下载的脚本似乎总是带有愚蠢的高 z-index。
现在我只需要确保我使用 10、20、30 等的增量，对我来说效果很好。
现在我们相处得很好！
我发现那些荒谬的高 z-index 数字特别有趣的一点是，对于一些使用略微过时浏览器的用户来说，它们没有任何效果。
例如，在 Windows XP（32 位）中，此类整数的限制为 +/-32,727，并且直到最近，许多浏览器都会简单地丢弃这些信息，而不是对其进行更正。
更多信息，请参阅
http://stackoverflow.com/questions/227738/is-there-an-upper-limit-to-z-index-values-in-web-browsers
http://en.wikipedia.org/wiki/Integer_%28computer_science%29
负 z-index 在 Firefox 中不起作用，但如果你在 body 中添加“position:relative;left:0px;top:0px;z-index:0”，它就会起作用 :)
我说的是 Firefox 2。
我使用 4、8、15、16、23 和 42 的 z-index 值（开玩笑）。通常我坚持使用 10 的增量，除非我被迫包含弹出/下拉导航。那些我从 1000 开始，以确保它们位于内容之上。
前段时间我整理了一些东西，以便人们可以自己了解 z-index 的工作原理。
学习元素如何堆叠
有趣的讨论。
我一直想知道为什么使用 z-index 对我们来说变得如此自动化。曾经有过 z-index 之前的时代。
我也觉得那些大数字很荒谬，很少使用 z-index。我确实喜欢它在设计中的用途，以及它可以实现的目标，但它们应该带有警告标签，以免被过度使用。
非常感谢。
我一直认为 z-index 值没有标准“单位”有点奇怪。我倾向于坚持使用 100 的增量——否则跟踪事情会变得非常混乱。
我喜欢上面其他人提到的通过选择器而不是任意 z-index 值来设置堆叠顺序的想法。因此，与其尝试跟踪一堆不同的值，我只需说“使所有具有类 .top 的元素显示在所有具有类 .bottom 的元素之上”或类似的东西。
不确定语法是什么，但你明白了。
组织
z-index的一个好方法。有没有库可以做到这一点？嗨，
有趣的帖子。只是想发布我今天遇到的问题和解决方案，以防其他人也遇到此类问题。
如果你使用了一个非常高的 z-index，除了 Firefox 之外的每个浏览器似乎都会将其降低到它们可能达到的最高值。但是，如果该数字对于 Firefox 来说太高，那么它将简单地将 z-index 设置为“0”。
所以请注意，它让我措手不及。
我使用如此高的值的原因是，我从其他人那里接管了这个网站，他们使用了高值，而且由于我还不了解其全部内部工作原理，因此我使用了高数字来确保我正在做的事情得到了正确的显示……但可惜……有一个限制！
所以请注意，浏览器似乎有一个 z-index 阈值。
Mikey。