将问题定位在不同的页面上

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

您的方法不正确：

什么是期望在其他页面上重复，keep it relative....DOM is visible on 1 page，keep it absolute，这样你就可以避免任何麻烦，因为relative是一种默认的位置！

<div class="slideshow">
    <!--
    keep it :
      position:absolute;
      top : 0;
      left : 0;
      right : 0;
    -->
</div>
<div class="banner">
    <!--
     position : relative
     place top left right according to your DOM layout
    -->
</div>