问题
so I have fixed and centered the header, and the z-index achieves it being over the top of content that scrolls, however there is a small gap at the top.
I tried using overflow:auto but it did not work as I had hoped.
<body>
<div class="wrapper">
<header class="site-header delay fadeInDown animated">
<a class="header-link fadeInDown animated" href="/">
<h1>BryanBell</h1>
</a>
</header>
CSS
h1 {
font-family:"CubanoRegular";
font-size:72px;
letter-spacing:12pt;
line-height:120%;
text-align:center;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin:50px;
padding:25px;
}
header {
position:fixed;
text-align:center;
margin:0;
padding:0;
width:100%;
height:150px;
z-index:999;
background-image: url('http://subtlepatterns.com/patterns/cartographer.png')
回答1:
Add this to your CSS:
html{
margin-top:0;
padding-top:0;
}
body{
margin-top:0;
padding-top:0;
}
回答2:
By default, the page has a small amount of margin.
Therefore, for things like this, we need to reset the margin and padding to 0.
I also usually set the width and height to 100% as well, like this:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%
}
The reason that jsFiddle displays it fine is that it has already reset the margin and padding.
来源：https://stackoverflow.com/questions/11463059/fixed-header-displayed-over-content-but-there-is-a-gap-at-the-top