css - 多个顶级固定 Div？

Question

我有两个 div: - 标题栏，滚动时固定，卡在页面顶部。 - 一个通知 div，其中包含一个消息横幅，如果被触发，该横幅将向下滑动。

标题栏固定在顶部很好，但我似乎无法让通知 div 自行固定在它下面。每次我尝试这个时，这个 div 都会固定在我的页眉栏前面的页面顶部；似乎取代了它。填充似乎没有帮助。

有人可以给我一些建议吗？

这是工作div:

#header {
    text-align: left;
    background-image:url(../Resources/Banner2.gif);
    background-repeat:no-repeat;
    background-color:#00ed32;
    color:#FFF;
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
    padding:15px;
}

这是我想在其下修复的 div:

.notify {
    background: url(../resources/gradients.png) 
    repeat-x 0px 0px; 
    top: -40px; 
    left: 0px;  
    position:fixed; 
    z-index: 100; 
    width: 100%; 
    overflow: hidden;
}

Answer 1

最简单的方法是在页面顶部放置一个“holder”栏，然后在其中嵌套“header”和“notification”元素。

例如:

CSS

#holder {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

#header, .notify{
    //what ever styles you have
    //position: relative or static
}

HTML

<div id="holder">
    <div id="header">...</div>
    <div class="notify">...</div>
</div>

编辑

工作示例:http://jsfiddle.net/Q6CWv/

更新

如果您使用的是 JQuery，则在 .notify 元素上添加向下滑动效果应该相当简单:

$('.notify').slideDown();

工作示例:http://jsfiddle.net/Q6CWv/1/