多个顶级固定分区？

Question

我有两个div:-A标题栏,在滚动时固定,并卡在页面顶部. - 通知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/

更新

.notify如果您使用JQuery,那么在元素上添加向下滑动效果应该非常简单:

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

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