没有绝对定位的Z-Index

Question

由于CSS技巧（例如负外边距）等的结果，有时我会有一些HTML被渲染为出现在HTML文档后面的内容之下。尽管原始元素在技术上应该在后面的元素之下，但我想将它们显示在后面的元素上方。

是否可能使一个HTML元素出现在另一个元素的上方而无需指定绝对位置？似乎z-index没有绝对位置没有任何效果。

- GoldenNewby

Answer 1

使用position:relative; z-index:10。

z-index对于position:static（默认值）没有影响。

请注意，z-index不是全局层级系统，而只区分每个定位父元素内的顺序。如果您有：

<style type="text/css">
  div { position:relative }
  #a  { z-index:1  }
  #a1 { z-index:99 }
  #b  { z-index:2  }
</style>
...
<div id="a"><div id="a1">SUPER TALL</div></div>
<div id="b">I WIN</div>

如果#b位于#a上方，那么#a1永远不会渲染到b的上面。你可以在http://jsfiddle.net/DsTeK上看到一个演示。

- Phrogz

---

默认是静态的？哇，我这些年一直以为它是相对的。 - Jay

@GoldenNewby 不客气。我已经在答案中添加了第二点的演示。 - Phrogz

没错，它在我的代码中立即起作用了。只需要等待最短时间就可以接受了。 - GoldenNewby

你关于不使用全局变量的笔记（和演示）非常有帮助。 - zimkies

谢谢您提到这一点：z-index不是全局分层系统。 - geeksal

在较新版本的浏览器中，即使使用 position: static，似乎也允许使用 z-index。 - trysis

Answer 2

我知道Phrogz的答案已经被接受了，而且这是一个好答案，但是仅供参考：你并不总是需要使用z-index。

当一个元素有position:relative属性时，它也会显示在没有position属性（或position:static）的所有其他元素的顶部。即使你完全没有使用任何z-index属性！

jsFiddle。

- Mr Lister

---

仅供参考，设置相对定位和z-index为-1的元素会位于静态（默认）元素下方。 - Rajkamal Subramanian