クロム・インスペクタ・デバイスのスクロール・ダウンに位置が固定されていません

Question

私はクロム・ツールを使用してインスペクタ・ウェブで私のウェブサイトをテストすると、position:fixedのヘッダが機能しないと思います。他のすべてのブラウザと画面のディメンションはうまく機能します。ちょうどインスペクタのWebが動作しません。

.site-header{ display: block;} 
 
.header-top{ 
 
\t background-color: #87b7bb; 
 
\t height: 90px; 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t z-index: 1; 
 
\t \t -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66); 
 
    -moz-box-shadow: 0px 00px 10px 0px rgba(0,0,0,0.66); 
 
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66); 
 
} 
 
.block{ 
 
    position:static; 
 
background-color: #000; 
 
    height:1000px; 
 
    width:100%; 
 
}

<div class="site-header" > 
 
\t \t <div class="header-top"> 
 
\t \t </div> 
 
</div><!-- #masthead --> 
 
<div class="block"> 
 
<p> 
 

 
</p> 
 
</div>

私はすべての設定を変更することができインスペクタツールを使用して、私は変更を参照してください

が、固定された位置に動作しません。

また、これはスクロールダウンでのみ発生します。私がスクロールアップするとき、ヘッダーが正しい方法で私のウィンドウの上に移動するのを見ます。

いくつか私を助けることができますか？

Answer 1

.header-topにトップ：0を追加しましたか？代わりにwidth 100%

のほか

は、次の

.header-top{ 
    background-color: #87b7bb; 
    height: 90px; 
    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    z-index: 1; 
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66); 
    -moz-box-shadow: 0px 00px 10px 0px rgba(0,0,0,0.66); 
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.66); 
}