【问题标题】:How to make z-index to work with position: relative;如何使 z-index 与位置一起工作:相对;
【发布时间】:2011-08-21 08:33:18
【问题描述】:

更新:感谢您的所有 cmets。我认为这是一个“当前的堆叠上下文”问题。如果到那时我无法解决问题,我将在明天早上复活节时间提供代码。

我有一个问题,我的自动建议下拉列表被部分隐藏,因为它下面的 div 具有优先权。

一直在想办法用z-index 解决这个问题。根据 W3 Schools “z-index 仅适用于定位元素(位置:绝对、位置:相对或位置:固定)”。

我发现只有在下拉列表中使用position: fixed; 时,z-indexing 才会起作用。但问题是我想使用position: relative;。我尝试为下拉列表和重叠 div 设置相对位置,并将 z-index 分别设置为 +100 和 0。

任何建议将不胜感激。

我正在 Firefox 4 和 Chrome 中测试它。

【问题讨论】:

  • 该元素中是否有超过 100 个元素? (只是确保。)
  • 你好 minitech。下拉列表中的元素不超过 100 个。
  • 不在下拉列表中,在其父级中。
  • 如果您在 IE 中进行测试,它在 z-indexing 方面有一些怪癖。 quirksmode.org/bugreports/archives/2006/01/… 这个错误即使在 IE8 中也存在(不确定 IE9)。
  • 如果您展示了一些可以重现您的问题的示例代码,我们可能会对您有所帮助。

标签: html css


【解决方案1】:

z-index 仅适用于“当前堆叠上下文”。很可能 div 重叠 div 处于不同的堆叠上下文中。

也有可能你做得对,但 FireFox 有错误。我知道至少有一个长期存在的错误,即 FireFox 在 z-index 方面不符合标准。或许可以在基于 WebKit 的浏览器中尝试。

你还没有发布你正在使用的 HTML/CSS,所以我无法得到比这更具体的了。请发布您的代码,我会更新我的答案以更具体。

z-index 属性在此处定义:http://www.w3.org/TR/CSS2/visuren.html#z-indexw3schools.com 不是此类信息的最佳来源。

【讨论】:

  • 如果您可能会问,您指的是哪个错误?我能临时找到的唯一一个是 SVG 内容的 z-index,这显然不是这里的问题。
  • @Boris 在一些非常常见的边缘情况下,负 z-index 将呈现在 元素的背景颜色/图像后面。规范清楚地表明负 z-index 是一个有效值(它适用于所有其他浏览器)。我在 bugzilla 中关注它,据说它需要大量重构才能修复。几年后,我不再关注这个错误,因为越来越多的人评论,我收到了太多的电子邮件。不知道现在是什么状态。由于默认情况下所有内容都是 0,因此负 z-index 是将设计元素放在页面内容后面的好方法。
  • 自 2006 年 2 月以来,负 z-index 问题已得到修复,该修复程序在 Firefox 3.0 中发布。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-10-17
  • 2022-01-23
  • 2012-02-17
  • 2014-01-25
  • 1970-01-01
相关资源
最近更新 更多