Question

我正在构建一个小型Web应用程序。我有两个div。一个是绝对的，另一个是静态的。我试图将我的静态div放在我的绝对值之上，这样它仍然是最重要的项目。

非常简单的代码示例：

http://jsbin.com/efuxe3/edit

如何做到这一点？

编辑：我一直在使用z-index。它似乎没有效果。

Answer 1

z-index不适用于static元素。

根据this page：

此属性指定堆栈位置值为的框的级别 absolute，fixed或relative之一。

如果您改为使用div relative，则可以使用z-index来确定订单。

position: relative将元素相对于其默认（静态）位置定位，因此如果您未指定顶部，底部，左侧或右侧，则static和{之间没有区别除了那个亲戚之外，{1}}允许你使用relative将你的元素向上移动。

修改：根据您的代码示例here's a working demo。

编辑2：根据Nathan D. Ryan在下面的评论中提出的建议，您也可以对您的绝对定位div应用否定z-index。这会将其移到页面上没有定义较低z-index的其他所有内容。

Answer 2

您可以将绝对定位的元素放置在静态定位的元素后面，而不是将静态定位的元素放置在绝对定位的元素上。您可以通过将绝对定位元素的z-index设置为负值来执行此操作。但是，正如@Town所提到的，这也将绝对定位的元素置于正常流程中的其他所有元素之后。

Answer 3

您可以将负z-index应用于将其置于静态div后面的其他元素。这可以直接应用于其他元素，也可以使用

*:not(connectedObjects){
    z-index:-1000000000000000000000000000;
  }

但这在Internet Explorer中不起作用

Answer 4

您可以使用第二个绝对定位的div来包含静态定位的元素：

<div id="container">
   <div class="underlay">
      I want this to appear under my static items.
   </div>

   <div class="item_container">
       <div class="item">blah</div>
       <div class="item">yada</div>
       <div class="item">foo</div>
       <div class="item">bar</div>
   </div>
</div>

你的css是

.underlay {
   position: absolute;
   z-index: 0;
}

.item_container {
   position:absolute;
   z-index:10;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

.item {
   position: static;
}

Answer 5

如果你的意思是z-Index，你可以设置具有更高z-index的div的样式

div.divClassName {
   z-Index:100;
}

编辑：

你可以改变你的div的z-index，绝对定位为负数，但是你必须为每个其他元素这样做。

除非您确实有充分理由将定位用于static，否则您可以更改它相对，z-index将有一个effect.io已经在你的代码示例中尝试过它，它工作正常;

Answer 6

使用z-index属性。应该在前面的对象的z-index必须高于其他对象。

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

6 个答案: