html - 如何将静态 div 放在绝对位置 div 之上？

Question

我正在构建一个小型网络应用程序。我有两个 div。一个是绝对的，另一个是静态的。我试图将我的静态 div 放在我的绝对 div 之上，以便它仍然是最上面的元素。

非常简单的代码示例:

http://jsbin.com/efuxe3/edit

如何做到这一点？

编辑:我一直在使用 z-index。好像没什么效果。

Answer 1

z-index 不适用于 static 元素。

根据 this page :

This property specifies the stack level of a box whose position value is one of absolute, fixed, or relative.

如果您将 div 设置为 relative，则可以使用 z-index 来确定顺序。

position: relative 相对于其默认(静态)位置定位元素，因此如果您未指定顶部、底部、左侧或右侧，则 之间没有区别>static 和 relative 除了 relative 之外，您还可以使用 z-index 将元素向上移动到堆栈中。

编辑:根据您的代码示例，here's a working demo .

编辑 2:根据 Nathan D. Ryan 在下面评论中的建议，您还可以将负 z-index 应用于绝对定位的 div。这会将其移到页面上未定义较低 z-index 的所有其他内容之后。