无法在页面顶部粘贴标题

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

对于Fixed标头 - 您需要添加position:fixed; css属性

添加，如果要删除空格，请将以下属性添加到header

position:absolute;
margin-top:0;

Answer 2

您有top:0;，但您没有分配职位

使用

position: absolute;如果您希望标题与页面的其余部分一起滚动

使用

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

Answer 3

使用position: fixed;和left: 20%;来保持header中心。

JSFiddle demo here.

Answer 4

您尝试过：

 position: absolute;

我还会使用webkit和moz组件的边界半径来确保跨浏览器的兼容性。

-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;

我也会设置保证金避免百分比，即使它可能没有影响

margin: 0 auto;