多个顶级固定分区?

时间:2012-05-15 07:28:25

标签: css html css-position

我有两个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;
}

2 个答案:

答案 0 :(得分:9)

最简单的方法是在页面顶部放置一个“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/

答案 1 :(得分:2)

虽然@MyHeadHurts的回答有点帮助,但对我来说这不是最好的解决方案,因为当通知弹出时,它要么与标题栏重叠,要么使得标题栏不会弹出,直到通知没有。我按照建议将它们放在不同的div中,但这可能是我的错。

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