多个顶部固定的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

最简单的方法是在页面顶部放置一个"持有者"栏，然后将"标题"和"通知"元素嵌套在其中。

例如：

.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/

Answer 2

> 尽管 @MyHeadHurts 的答案有些帮助，但这对我来说并不是最好的解决方案，因为当通知弹出时，它要么与标题栏重叠，要么使标题栏在通知之前不会弹出。我确实按照建议将它们放在单独的div 中，但这可能是我的错。

我的解决方案是进入弹出通知的 JavaScript 并将"top"值更改为页面高度的 3%。这现在可以完美地工作，除了如果应用了极端级别的缩放，标题和通知栏无法正确对齐。