所有关于.... Z-Index？

IT技术 javascript html css vb.net z-index
2021-01-17 00:06:36

这个属性让我很困惑。

嗯..我在谷歌搜索：

什么是 z 指数？

z-index 属性指定元素的堆栈顺序。具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。 答案来源

z-index 的用途是什么？

元素相互重叠的顺序。为此，您可以为每个元素分配一个编号（z-index）。该系统是具有较高编号的元素与具有较低编号的元素重叠。 答案来源

好的，我现在明白了，它组织元素，我们可以使用任何数字……更高的 z-index 数字出现在所有元素上……很好。

z-index 和 jquery ..非常简单，非常好

...但我从答案中注意到它取决于位置属性，所以 -->...(google)..

z-index 和位置之间的关系是什么？

演示--> >>源码

好的......所以z-index和position是一对......必须在一起......

需要更多信息::

它是否会在浏览器（IE7、IE8、chrome 等）中产生任何冲突？

z-index 有什么用途，或者我们可以用 z-index 做什么（取决于标签）？

...等等？

如果我理解错误，请纠正我...

提前致谢。

4个回答

Z-index 是确定哪个 html 元素在重叠时出现在另一个 html 元素之上的属性。基本思想是具有最高 z-index 的元素在“顶部”。

默认情况下，元素的 z-index 为零，但是将一个元素的 css 属性设置为 1，将另一个元素设置为 5 将使后一个元素在前者的“顶部”（如果它们重叠）。

到目前为止，如此简单，但有几件事需要注意。

一个，正如在另一个答案中已经提到的，只有当元素被定位为绝对、固定或相对位置时，z-index 才有效。（即 css 属性“位置”）。未定位元素的 z-index 为零。

使事情进一步复杂化（根据我的经验，通常不被理解的领域）是堆叠上下文的概念。更多信息可以在文章中找到如这个。简而言之，每次显式设置新的 z-index 时，都会启动一个新的堆栈上下文。设置了 z-index 的元素的所有子元素现在都在这个新的堆叠上下文中，它可能位于另一个不相关元素的堆叠上下文之上或之下。

这个堆叠上下文是什么意思？这意味着 z-index 为 100 的元素不一定位于 z-index 为 1 的元素之上。如果它们在不同的堆叠上下文中，则只有堆叠上下文本身的 z-index 很重要。

谢谢你让我这么简单……但我有一个问题：你说“每次你明确设置一个新的 z-index 时，你都会开始一个新的堆叠上下文”>>这是否会使网站变得更重或类似的东西?
2021-03-25 00:06:36
当你说“更重”时，我认为你的意思是“它是否使它更重量级/更慢”。事实是我从来没有检查过它是否会减慢渲染（或增加内存使用量）以拥有许多堆叠上下文，但即使它确实如此（我不确定它是否确实如此），我希望效果非常小. 一般来说，无论如何，您的页面最终不会有太多的堆叠上下文。如果您必须到处设置 z-index，这可能表明页面需要重新设计。一般来说，即使在有重叠内容的复杂页面上，我也只在少数地方设置 z-index。
2021-04-07 00:06:36

我建议在SmashingMagzine上查看此属性。

Z-Index CSS 属性：全面了解

它通过很好的示例和演示涵盖了该属性的所有细节。

@jjj：缺少什么，如果您可以分享，那就太好了:)
2021-03-15 00:06:36
. 我还不知道...我正在寻找更多信息
2021-03-21 00:06:36
太棒了......但我不认为“它涵盖了这个属性的所有细节”......我会阅读更多......谢谢
2021-04-05 00:06:36

要记住的最重要的事情是 z-index 仅在元素具有相对位置、绝对位置或固定位置时才起作用

这个说法是真的吗？Z-index 仅在 position 属性设置为 value 时才有效
2021-03-25 00:06:36

我不完全确定你在问什么，但在大多数情况下，如果你正在做复杂的样式，例如悬停工具提示或下拉导航，你只需要使用 z-index，只是为了确保它们显示在其他页面内容之上.

对于基本设计，您通常应该避免使用位置和 z-index 属性，因为您通常可以通过浮动等获得更好的性能和浏览器兼容性的相同效果。

Sarfraz 发布的 Smashing Magazine 链接是一篇关于该主题的优秀文章，如果您仍在努力理解该属性的功能，则它是一个很好的参考点。

哦..“避免”..为什么？（解释更多）......我的意思是，根据我读到的内容，它是简单的元素组织者..！！
2021-03-27 00:06:36
我只是倾向于避免它，因为在大部分设计中它是不必要的，并且它在浏览器之间的行为非常不一致，你最终会花时间让它在旧版中工作。如果需要，请务必使用它，但如果您不执行下拉菜单/工具提示/其他类似操作，我不明白您为什么需要这样做。
2021-03-29 00:06:36
我不会说它会在浏览器上产生冲突，但如上所述，不同版本的 IE 具有不同的 z-index 默认值，并且在它周围的行为也不同。
2021-03-30 00:06:36
@ Steve...所以...它确实会在浏览器上产生冲突...？
2021-04-01 00:06:36
其它你可能感兴趣的问题
上一篇Javascript 正则表达式挂起（使用 v8） 下一篇Javascript regexp 字面量和构造函数之间的差异