html - 无法将页眉粘贴在页面顶部

Question

我有一个页眉，我想将其与页面一起向上/向下滚动。这很有效。我还想将其“粘贴”到页面顶部。

我一直在页眉和页面顶部之间出现这种差距。检查图像。我怎样才能缩小这个差距？

这是标题的css

header {

    padding-left:5%;
    padding-right:5%;
    margin:auto;
        margin-top:0%;
        padding-top:0%;
        top:0;
    width: 50%;
        height:auto;
    border-left:1px solid gray;
    border-right:1px solid gray;
    border-top:1px solid gray;
    border-bottom:1px solid gray;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background-color:#5C8AE6;
    text-align: center;
    padding-bottom:0%;
    overflow:auto;
    box-shadow:2px 2px 10px 10px #C9C9C9;
    -webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
    -moz-box-shadow:2px 2px 10px 10px #C9C9C9;

  /* Shadow around the header, For IE<9 */  
  filter:
 progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9, direction=0, strength=5),  

progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9, direction=45, strength=2),  

progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9, direction=90, strength=5),  

progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9, direction=135, strength=5),  

progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9, direction=180, strength=10),  

progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9, direction=225, strength=5),  

progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9, direction=270, strength=5),  

progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9, direction=315, strength=2);
    background: -webkit-linear-gradient(#5C8AE6, #6C96E8);
    background: -o-linear-gradient(#5C8AE6, #6C96E8);
    background: -moz-linear-gradient(#5C8AE6, #6C96E8);
    background: linear-gradient(#5C8AE6, #6C96E8);
}][1]

我错过了什么？

谢谢

Answer 1

你有 top:0; 但你没有分配位置

使用

position: absolute;如果你想让页眉与页面的其余部分一起滚动

使用

position: fixed; 如果您希望标题固定在顶部，并让内容滚动过去。