Question

所以我已经固定并居中了标题，并且z-index实现了它在滚动内容的顶部，但顶部有一个小间隙。

我尝试使用overflow：auto但它没有像我希望的那样工作。

<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')

Answer 1

将此添加到您的CSS：

html{
    margin-top:0;
    padding-top:0;
}
body{
    margin-top:0;
    padding-top:0;
}

Answer 2

默认情况下，该页面有少量margin。

因此，对于类似的情况，我们需要将margin和padding重置为0。

我也经常将width和height设置为100%，如下所示：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}

jsFiddle显示正常的原因是它已经重置了margin和padding。

Answer 3

在标题内添加：

<header style="top: 0px">

固定标题显示在内容上，但顶部有一个空白，

3 个答案: