固定标题显示在内容上方，但顶部有空隙，

本文介绍了固定标题显示在内容上方，但顶部有空隙，的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我固定并居中了标题，并且z-index达到了超过滚动内容的顶部，但是在顶部有一个小小的空白。

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.

我尝试使用overflow：auto，但没有按照我的希望工作。

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

推荐答案

将其添加到您的CSS中：

Add this to your CSS:

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

这篇关于固定标题显示在内容上方，但顶部有空隙，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！