html - ヘッダー アイコンのオーバーラップを修正

Question

次の画面があり、プログレスバーがあり、アイコンが重なっていて、ナビゲーションバーが邪魔になっています。

プログレスバーCSS：

ol.progtrckr li {
    display: inline-block;
    text-align: center;
    line-height: 3em;
}
ol.progtrckr li:before {
    overflow:hidden;
    position: relative;
    bottom: -2.5em;
    float: left;
    left: 50%;
    line-height: 1em;
}

ナビゲーション バーの CSS:

#navwrapper {
margin:0 auto;
background-color: #3A87AD;
position: fixed;
width: 100%;
}

Answer 1

z-indexをナビゲーション バーに適用します。

#navwrapper {
    z-index: 100;
    ....
}

大きい要素は他の要素とz-index重なります。

詳細については、z-index - MDNをご覧ください。