Question

更糟糕的是，!important;或z-index: 99999999;

我们都知道!important;很糟糕，而且why确实很糟糕。但是如何将一个大胆的鸣叫z-index: 999999999999999999;放入你的级联中呢？当然，他们俩都不好。但是，管理z-index值仍然是我尚未以清晰/可扩展/可持续的方式征服的。

你们用什么技巧，混合，方法来管理z-index？像this这样的功能性方法有什么优缺点，或像this那样潮湿的高sass map？

Answer 1

我倾向于以z-index的倍数声明6。

这样，如果我需要在z-index和6之间插入12级别，我可以插入9。

然后，如果我需要在z-index和9之间插入12级别，我仍然同时拥有10和11选项。

Answer 2

Ahem，晚会晚了。。我正在为我的公司构建Web库组件，并希望了解有关z索引混乱的SO主题。

要回答您的问题，全部基于观点：查看底部以获取我的答案。

说明：

看看这个很棒的解释：O'Reilly : Understanding and Managing z-index

z-index基本上是一个非常简单易懂的概念：浏览器通过将元素分组（可以简单地称为“ 呈现上下文”）来呈现页面。具有此类上下文的第一个元素是html标签。在满足某些条件时为每个子元素创建上下文（上面链接中的*详细信息）。具有相同上下文的元素不必具有相同的父代或祖先。 BIG部分是您赋予元素的z-index值，如果其父级具有渲染上下文，则仅应用于其父级的渲染上下文。如果没有父级具有找到了渲染上下文，将该元素放置在与具有渲染上下文的第一个祖先相同的渲染上下文中；如果没有，则将其放在html / body中。

如果您的Web组件的父节点的渲染上下文低于另一个父级兄弟的同级节点，则无需添加!important或巨大的z-index值即可将对话框/菜单置于所有内容之上具有更高的呈现级别，这就是为什么有些人不理解为什么元素具有最高z-index的情况而没有出现在其他元素之上的原因。假设：

<head>
    <style>
        div.pageContent: { position: absolute; }
        div.menuContainer: { position: absolute; z-index:999999; }
        div.pageBackground: { position: absolute; }
    </style>
</head>
<body>
<div id="pageContent"></div>
<script>
    var pageContent = document.getElementById("pageContent");

    // dynamically create background...
    var pageBackground = document.createElement("div");
    pageBackground.className = "pageBG";
    pageContent.appendChild(pageBackground);

    // dynamically create initially loaded content...
    // ...

    // dynamically create menu container...
    var menuContainer= document.createElement("div");
    menuContainer.className = "menuContainer";
    pageContent.appendChild(menuContainer);

    // ... but later on, more contents are added upon user inputs
</script>
</body>

在上述情况下，将z-index大于999999的任何内容添加到pageContent都将始终显示在菜单顶部。

因此，!important不是解决方案，z-index不是问题，这里是真正的问题：

许多人不了解呈现上下文的内容，以及不满足一个或不满足一个条件的条件；他们只是知道您可以控制在上方或下方的内容，并开始将z-index值放置在DOM树中的任何位置，而无需直观且易于维护的图层上下文。
将具有不同比例的渲染上下文（每个定位节点将创建渲染上下文）的资源（css / themes，js / api / plugins）混合在一起，这意味着您必须清楚地了解如何以及何时创建这些上下文，并进行管理它们跨越所有css / js依赖项-祝您好运！）

因此，这全都取决于您如何构建页面布局（如果您有权访问DOM生成/操作的那一部分，大多数CLI都不允许您这样做）和/或理解和预测页面的容易程度。页面中内容的行为（对于添加到页面中的每个依赖项，您是否有足够清晰的文档，以及它们是否做过一些骇人听闻的事情，例如更改位置或不透明性，可能会使UI混乱？）

您可以做什么：

请勿使用z-index（个人意见库-您可以忽略此内容）
通过更改基本css（创建或删除上下文）预先修复错误，而不是通过使用!important或z-index值解决错误。
以明确分隔各层上下文的方式构建html布局：背景，基本内容，重要说明，通知，弹出窗口，对话框，菜单，启动画面
向资源/插件作者/公司报告任何渲染问题，以获取适当的修复或指南以获取所需的内容
通过javascript与经理一起控制客户端的z-index（如链接中提供的那样）
最终，如果您只想快速进行肮脏的修复，请创建自己的小型布局管理器，该管理器可以将任何元素从DOM树中的位置移出，将其设置为正文中的最后一个子元素，并为其提供上下文（例如：position：absolute），给他最大的z-index值，然后在完成操作后，删除所有hack，然后将其放回原处。原理是一次获取一个最顶层的元素，快速而轻巧（更智能，但不建议这样做）

根据上下文，有一些准则适用于适当的z-index值，范围从负值（对于背景）到高于6.000.000（对于全页面覆盖）直至最大值（32或64）位带符号整数，具体取决于浏览器和操作系统）。如果我们既遵循那些准则，又遵循鲁宁的建议，那就不要使用那么多/巨大的价值，那我们就会遇到问题。这是任何人的口味，我个人不喜欢将z-index设置为10以上，这就是我的大脑可以处理的层数。假设我有两个Web组件：TabPages和Splitter，它们可以嵌套。每个组件都创建一个渲染上下文。通过嵌套它们，我实际上得到了无限数量的渲染层，并且没有办法阻止任何插件css / js创建并发渲染上下文。因此，我从body / child div级别开始就预先分离了各个层，使它们具有上下文，仅此而已，就可以处理10个或更少的z索引。固定的或丢弃的任何不遵循的内容。

更糟糕的是!important还是z-index:99999999？

这些方法都不能解决问题，但是如果您的元素具有固定的z-index值，则比指定的最大值更高的z-index可能是更好的解决方案，因为使用!important可能一开始就不好，进一步覆盖它会更糟。顺便说一下，某些库可处理范围从-1..9999到-9999..maxInteger的z索引。您将使用什么值？再次，从头开始解决该问题，将上下文明确分开，您或其他任何维护代码的人都将减少头痛；）

管理z-index

2 个答案: