在不同页面上定位问题

Question

基本上我有一个网页，其中包含滑块，横幅，菜单和内容。

我的HTML代码如下：

<div class="slideshow">
    ...
</div>
<div class="banner">
    ...
</div>
<div class="navigation">
    ...
</div>
<div class="content">
    ...
</div>

和CSS

.banner
{
    z-index: 1000;
    position:absolute;
    width: 100%;
    top: 0;
    margin-bottom: 140px;
}

.navigation
{
    margin: 0px auto 0;
}

.content
{
    padding: 0px;
    margin-bottom: 40px;
}

滑块仅显示在主页上，一切正常。但是，如果我打开了一个内容页面div.slider没有显示（我确实想要这样），div.navigation上升到页面顶部并查看div.banner以后div.banner {}有z-index和position:absolute（参见实际视图1）。

我尝试将margin-bottom:140px添加到div.banner，但无效。然后我尝试将margin-top:140px添加到div.navigation，但主页中的div.slider和div.navigation之间存在差距（请参阅实际视图2）。

我希望div.slider和div.banner一起坚持页面顶部，但div.slider将位于div.banner之下。另外，如果未显示div.slider，我希望div.navigation之后显示div.banner（请参阅所需视图）。

您可能还想查看fiddle

Answer 1

您的方法不正确：

什么是预计会在其他网页上重复，保持relative ...... 仅在1页上可见的DOM ，保留{ {1}}，这样你就可以避免任何麻烦，因为absolute是一种默认的位置！

relative