由于CSS技巧(例如负外边距)等的结果,有时我会有一些HTML被渲染为出现在HTML文档后面的内容之下。尽管原始元素在技术上应该在后面的元素之下,但我想将它们显示在后面的元素上方。
是否可能使一个HTML元素出现在另一个元素的上方而无需指定绝对位置?似乎z-index没有绝对位置没有任何效果。
是否可能使一个HTML元素出现在另一个元素的上方而无需指定绝对位置?似乎z-index没有绝对位置没有任何效果。
使用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的答案已经被接受了,而且这是一个好答案,但是仅供参考:你并不总是需要使用z-index
。
当一个元素有position:relative
属性时,它也会显示在没有position
属性(或position:static
)的所有其他元素的顶部。即使你完全没有使用任何z-index属性!
position: static
,似乎也允许使用z-index
。 - trysis