基本上我有一个网页,其中包含滑块,横幅,菜单和内容。
我的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
答案 0 :(得分:0)
您的方法不正确:
什么是预计会在其他网页上重复,保持relative
...... 仅在1页上可见的DOM ,保留{ {1}},这样你就可以避免任何麻烦,因为absolute
是一种默认的位置!
relative