0

我有一个具有以下样式的 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 兼容的任何想法？

4

8 回答 8

2

位置：绝对；从盒子模型定义的流中移除元素。任何比该持有人更小的元素都将被它隐藏。解决方法是不要使用position: absolute; 对于这种情况，因为我知道您并不真正想要可以通过此实现的目标。

我建议您花点时间了解一下什么是盒子模型：http ://www.w3.org/TR/CSS2/box.html

于 2013-04-18T17:02:28.313 回答
1

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

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

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

或者

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

于 2013-04-18T17:03:00.237 回答
1

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;

}

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

于 2013-04-18T17:14:15.670 回答
0

如果位置是绝对的，则将顶部添加到其他元素。

top : #holder 的高度

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

于 2013-04-18T17:20:18.193 回答
0

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

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

于 2013-04-18T17:02:03.213 回答
0

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

于 2013-04-18T17:02:12.977 回答
0

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

于 2013-04-18T17:01:24.543 回答
0

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

于 2013-04-18T17:01:39.727 回答