Html 如何将静态 div 放在绝对位置 div 之上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5924431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put a static div on top of an absolute position div?
提问by vondip
I am building a small web application. I have two divs. One is absolute and the other is static. I am trying to position my static div on top of my absolute one, so that it remains the top most item.
我正在构建一个小型 Web 应用程序。我有两个div。一个是绝对的，另一个是静态的。我试图将我的静态 div 放在我的绝对 div 之上，以便它仍然是最上面的项目。
Very simple Code Sample:
非常简单的代码示例：
How can this be done?
如何才能做到这一点？
Edit: I have been using z-index. It seems to have no effect.
编辑：我一直在使用 z-index。好像没什么效果。
回答by Town
z-indexdoesn't apply to staticelements.
z-index不适用于static元素。
According to this page:
根据此页面：
This property specifies the stack level of a box whose position value is one of
absolute,fixed, orrelative.
该属性指定的箱，其位置值是中的一个的层叠级别
absolute，fixed或relative。
If you make your div relativeinstead, you can use z-indexto determine the order.
如果您relative改为制作 div ，则可以使用它z-index来确定顺序。
position: relativepositions the element relative to its default (static) position, so if you don't specify a top, bottom, left or right then there'll be no difference between staticand relativeother than that relative allows you to use z-indexto move your element up the stack.
position: relative位置上的元素相对于默认（静态）的位置，所以如果你不指定顶部，底部，左侧或右侧，然后就会有没什么区别static和relative其他比相对允许您使用z-index移动你的元素了堆。
Edit:based on your code sample, here's a working demo.
编辑：根据您的代码示例，这是一个有效的演示。
Edit 2:based on Nathan D. Ryan's suggestion in the comments below, you could also apply a negative z-indexto your absolutely-positioned div. This would move it behind everything else on the page that didn't have a lower z-indexdefined.
编辑 2：根据 Nathan D. Ryan 在下面评论中的建议，您还可以z-index对绝对定位的 div应用否定。这会将它移到页面上没有下z-index定义的所有其他内容之后。
回答by Nathan Ryan
Rather than placing the statically positioned element over the absolutely positioned element, you can place the absolutely positioned element behind the statically positioned element. You can do this by setting the z-indexof the absolutely positioned element to a negative value. However, as @Town mentioned, this will also place the absolutely positioned element behind everything else in the normal flow.
您可以将绝对定位的元素放在静态定位的元素后面，而不是将静态定位的元素放在绝对定位的元素上。您可以通过将z-index绝对定位元素的 设置为负值来实现。但是，正如@Town 所提到的，这也会将绝对定位的元素置于正常流中的所有其他元素之后。
回答by LostLin
You can apply a negative z-index to the other elements placing them behind the static div. This can be applied directly to the other elements or you can use
您可以将负 z-index 应用于将它们放置在静态 div 后面的其他元素。这可以直接应用于其他元素，或者您可以使用
*:not(connectedObjects){
z-index:-1000000000000000000000000000;
}
But this does not work in internet explorer
但这在 Internet Explorer 中不起作用
回答by colmde
You could have a second absolutely positioned div to contain your statically positioned elements:
您可以使用第二个绝对定位的 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>
And your css is
而你的 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;
}
回答by Ibu
if by top you mean z-Index, you can set the style of that div with a higher z-index
如果顶部是指 z-index，则可以使用更高的 z-index 设置该 div 的样式
div.divClassName {
z-Index:100;
}
edit:
编辑：
you can change the z-index of your div, with absolute positioning to a negative, but then you will have to do so for every other element.
您可以将 div 的 z-index 更改为绝对定位为负数，但是您必须对其他每个元素都这样做。
Unless you really have a really good reason to using positioning to staticyou can change it
to relative, and the z-index will have an effect.io have tried it in your code sample and it works fine;
除非您真的有充分的理由使用定位，否则您static可以将其更改为相对，并且 z-index 将有效果。io 在您的代码示例中尝试过它并且工作正常；
回答by mrkva
Work with z-indexattribute. The z-indexof the object which should be at front must be higher than the other ones.
使用z-index属性。在z-index这应该是在前方的物体的必须比其他的高。
