0

そのため、ヘッダーを固定して中央に配置しました。z-indexは、スクロールするコンテンツの上部にあることを実現しますが、上部に小さなギャップがあります。

オーバーフロー：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')
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ます。

したがって、このような場合は、marginとpaddingをにリセットする必要があり0ます。

また、私は通常、次のようにwidthとheightを設定します。100%

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

jsFiddleが正常に表示する理由は、marginとがすでにリセットされているためpaddingです。

于 2012-07-13T03:09:09.393 に答える
0

ヘッダー内に追加します。

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