如此处所示:http://codepen.io/anon/pen/rVPqeL
我正在使用3个简单的div,我想获得一个“全局”滚动条的效果,该滚动条必须在 header 上移到。
HTML是非常基本的
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
</div>
这是CSS:
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
.content {
margin-top: 50px;
min-height: 2500px;
background-color: blue;
}
滚动条将标题div的保留在下。我究竟做错了什么?
最佳答案
下面的代码可以解决问题
http://codepen.io/anon/pen/XbOxgp
.container {
background-color: gray;
overflow-y: scroll;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 2;
}
.content {
z-index: 1;
width: 100%;
position: absolute;
top: 60px;
min-height: 2500px;
background-color: blue;
}