Question

我有一个具有以下风格的div

#holder{
    margin-top: 1px;
    background-color: #DCE1E5;
    position:absolute;
    left:0;
    right:0;
    display:block;
    padding:8px;
}

我的问题是我在div标签后面输入的任何元素都隐藏在div后面，例如

<div id="holder">My Stuff here of</div>
<div id="somethingelse">This will be hidden behind the top div</div>

关于我如何解决这个问题的任何想法，并且它与IE7兼容？

Answer 1

position：absolute; 从框模型定义的流中删除元素。任何小于 holder 的元素都将被其隐藏。对于这种情况，解决方案不是使用 position：absolute; ，因为我知道你并不是真的想要通过它实现的东西。

我建议你花点时间了解一下哪种盒子模型：http://www.w3.org/TR/CSS2/box.html

Answer 2

当您绝对定位元素时，它将从正常文档流中删除并放置在您指定的位置。所有其他项目继续遵循文档的正常流程，这意味着其中一些项目可能与绝对定位的元素位于同一位置。

要解决此问题，您可以采用以下两种方法之一：

不要绝对定位#holder。这将使它保持在正常的文档流程中并与其他元素很好地配合。

或

提供适当的边距，使其他元素远离#holder。

Answer 3

IE7必须为位置相对或绝对的任何元素设置z-index属性。

<强> CSS

#holder{
position:absolute;
left:0;
right:0;
display:block;
padding:8px;
margin-top: 1px;
background-color: #DCE1E5;
z-index: 1;}

#somethingelse {
position: relative;
top: 40px;
z-index: 1000;

}

DEMO在这里：http://jsfiddle.net/B3jZ5/2/

Answer 4

你应该在下一个div中尝试position: relative;而不是绝对。

Answer 5

这是一个z索引问题。您可以通过为各种元素指定z-index值来覆盖此行为。并且预警，IE7将任何具有“位置”样式的元素赋予z-index值，因此可能需要进行一些测试才能使其正常工作。您通常必须将z-index分配给父元素才能使其正常工作。

Answer 6

您应该为绝对元素指定top和left。 somethingelse后面有holder元素。

删除背景颜色以查看#somethingelse或为两个元素指定z-index。然后你可以看到两个元素重叠。您还可以添加不透明度或使持有者位置为相对位置。

Answer 7

当您将#holder DIV更改为具有“绝对”位置时，这意味着您将其从页面上的常规元素流中取出。因此，所有其他元素将流动以取代它。根据您的最终目标，可能会有许多解决方案。但是，只要你给我们的东西，你可以通过将位置改为“相对”来解决问题。

Answer 8

如果position是绝对的，则将top添加到somethingelse元素。

top：#holder

的高度

或margin-top：#holder的高度，如果#holder元素像float一样浮动：left或right;

DIV位置绝对导致div之后的其他元素被隐藏

8 个答案: