Question

我的homepage上有div，未定位，它包含主图像。在这个主图像的顶部，我有一个容纳我的搜索栏的容器。我已将此容器position:relative top:-500px;放置在我的主图像上。

然后我又有了另外两个容器，但是如果我没有对它们进行任何定位，它们会出现在一个很大的垂直空间之后，所以我必须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>

Answer 1

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

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

这并不能解决您的问题，因为您仍然拥有奇怪设计所创造的高度。您需要返回绘图板并重新设计容器。你不需要这个位置：亲近并且把所有东西都搬了。

Answer 2

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

#homeFeaturedContainer {
    margin-top: -300px;
    margin-bottom: -300px;
}

为什么相对定位导致元素下方的空间？

2 个答案: