0

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

我尝试使用溢出：自动但它没有像我希望的那样工作。 

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

3 回答 3

1

将此添加到您的 CSS 中：

html{
    margin-top:0;
    padding-top:0;
}
body{
    margin-top:0;
    padding-top:0;
}
于 2012-07-13T02:38:04.060 回答
1

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

因此，对于这样的事情，我们需要将marginand重置padding为0。

我通常也将widthandheight设置100%为，如下所示：

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

jsFiddle显示它的原因是它已经重置了marginand padding。

于 2012-07-13T03:09:09.393 回答
0

在标题内添加：

<header style="top: 0px">
于 2020-12-20T19:43:32.637 回答