3

我的主页div上有一个，没有定位，它包含主图像。在这个主图像的顶部，我有一个包含我的搜索栏的容器。我已经定位了这个容器，使它出现在我的主图像上。position:relative top:-500px;

然后我有另外 2 个容器接下来会出现，但是如果我对它们的位置不做任何事情，它们会出现在一个很大的垂直空间之后，所以我不得不position:relative添加一个减号顶部。我必须继续这样做top:-300px或其他任何事情，因为如果我不这样做，下面会出现一个我无法填充的空间。

现在下一个div是我不想定位的页脚，因为它出现在每一页上。我怎样才能摆脱我的特色属性和页脚之间的空间？

这是代码：

//no positioning
<div style="margin: 0 auto" class="slideshowWrap">
    <div class="homeslideshow slide1"> 
    </div>
    <div class="homeslideshow slide2">  
    </div>
    <div class="homeslideshow slide3">   
    </div>
</div>


//position:relative top:-500px
<div id="homecontainer">
</div>


//position:relative; top:-300px; margin-bottom:-100px;
<div id="homeBoxContainer">
</div>
<div style="clear:both"></div>

//position:relative; top:-300px; 
<div id="homeFeaturedContainer">
</div>
4

2 回答 2

1

你设计容器的方式有问题。当您使用 position:relative 和 top:-300 向上移动所有内容时，它会向上移动所有内容，但是您的 #content 的高度仍然可以节省空间并保持高度。如果您希望页脚链接，请添加以下代码

#footer {
top: -300px;
position: relative;
}

这并不能解决您的问题，因为您的奇怪设计仍然具有很高的高度。您需要回到绘图板并重新设计您的容器。你不需要 position:relative 和移动一切。

于 2013-09-27T15:26:55.907 回答
0

我通常只在绝对定位的元素上设置顶部和底部值。试试这个：

#homeFeaturedContainer {
    margin-top: -300px;
    margin-bottom: -300px;
}
于 2013-09-27T15:19:52.763 回答