[ CSS ] ナビゲーション固定し、スクロールしても動かないヘッダーを作成する方法

[`yahoo` not found]

[`evernote` not found]

jQueryを使った方法も記事にされているのですが、今回は、CSSを使って「ナビゲーションを固定し、スクロールしても動かないメニュー」を作成する方法を書きます。

jQueryを使った方法は、リンクをご参考に下さい。

position: fixed;

position: fixed; を使うと、要素を常に画面上の指定した位置に固定させておくことができる。

位置は、top,bottom,left,right で指定する。

header {
     position: fixed;
     top: 0;
}

要素の重なり順を指定して、常に、ヘッダーが上部に来るようにする。

z-index プロパティは、要素の重なり順を指定する際に用いる。

整数値で指定し、値が大きいほど上に表示されます。

header {
     position: fixed;
     top: 0;
     z-index: 10;
}

z-indexプロパティは必ずpositionプロパティと併用する必要がある。

(Visited 3,907 times, 1 visits today)

[`yahoo` not found]

[`evernote` not found]