html - 没有绝对位置的 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 看到这个演示