Z-Index没有绝对位置

Question

由于CSS欺骗（如负边距），偶尔我会在HTML文档中的HTML内容下面呈现一些HTML。即使原始元素在技术上应该低于后面的元素，我也想在上面显示上面的元素。

是否可以将HTML元素显示在另一个元素上方而不必指定绝对位置？没有绝对位置，z-index似乎没有任何效果。

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>

...然后#a1永远不会在b上方呈现，因为#b位于#a之上。您可以在http://jsfiddle.net/DsTeK

看到此演示

Answer 2

我知道Phrogz的答案已经被接受了，答案很好，但仅仅是为了记录：你并不总是需要z-index。

当您在一个元素上有position:relative时，它也会显示在没有position（或position:static）的所有其他元素的顶部。即使你根本没有任何z索引！

jsFiddle