CSSの位置が固定されていない

Question

私がスクロールするたびに、作成したnavbarも下に移動します。私がposition:fixedを使用したとしても、ウィンドウのサイズを変更すると（小さい/大きい）、まだ動きます。

私は間違っていますか？

nav li:nth-child(1) { 
 
    position: fixed; 
 
    border: 1px solid #15317E; 
 
    font-size: 30px; 
 
    list-style-type: none; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    padding: 10px 10px 10px 10px; 
 
    width: 184px; 
 
    background-color: #15317E; 
 
    top: 20px; 
 
    left: 220px; 
 
} 
 
a:link, 
 
a:visited { 
 
    text-decoration: none; 
 
    color: white; 
 
    margin-bottom: 1px; 
 
} 
 
a:hover, 
 
a:active { 
 
    color: white; 
 
    background-color: #1569C7; 
 
    width: 1000px; 
 
}

<nav> 
 
    <li><a href="Team.html" title="Team">The Team</a></li> 
 
    <li><a href="#Info">Information</a></li> 
 
    <li><a href="#div">Community</a></li> 
 
</nav>

Answer 1

固定位置とは、ブラウザウィンドウを指します。この位置を使用する要素は常に表示されます。あなたが望むポジションは「絶対的」だと私は思う。 JSFiddle

nav li:nth-child(1) { 
    position: absolute; 
} 

Answer 2

それはおそらくあなたのモニターのいくつかの画面サイズです。たぶん、Zインデックスが重複問題に役立つかもしれない

@media (max-width: 1200px) { 
    #nav { 
    position:absolute; 
    left:0%; 
    top:10%; 
    margin: 0px; 
    padding: 0; 
    border: 1px yellow; 
    border-bottom: none; 
    width:100%; 
    z-index:9943; 
} 

}

のようなものを試してみてください。 https://jsfiddle.net/などに貼り付けると、位置の問題がどのようになっているかを確認することができます。