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.