今回は、ヘッダーの固定方法とz-indexの親子関係について説明していきたいと思います。
webプログラマーとしてコンテンツが長いページを作ることは当たり前のようにありますが、長いページを最後まで見終わった後にあれ？
戻るボタンどこだっけ？一番上か！！(涙)みたいな思いをユーザーの方々にさせたくないと思い載せてみました。
まず、ヘッダーの固定する方法からみていきましょう。とりあえず何の変哲もないサンプルから載せていきます。
</pre>
header {
width: 100%;
height: 60px;
text-align: center;
}
<pre>
これは、見た目は何もいじっていないプレーンの状態のヘッダーです。このままだと当然下にスクロールするとヘッダーも
一緒に下がってしまい、後で戻るボタンを探す羽目になりかなり煩わしい思いをします。
そこで、ヘッダーを固定するために次の属性を指定します。↓
</pre> position: fixed; z-index: 9999; <pre>
このように、上のposition: fixedを指定するだけでヘッダーを固定することができます。特殊なギミックを与えない場合は
これだけでも問題ないと思います。しかし、長いページの場合はスクロールすると、このままでは子のオブジェクトが親である
ヘッダーを覆ってしまい見た目もかなり悪目立ちしてしまいますね。
そこで下のz-indexの出番になります。このz-indexですが、今は9999と設定されてありますが、実はこの数値が大きければ大きいほど
親の優先順位が上がります。つまり、9999と設定しておくことによりこれから作る子オブジェクトよりは絶対に優先順位が
下がることはありません。
初学者のうちはデフォルトで9999でいいやみたいな感じで覚えていても問題ないですが、手の込んだサイトを作りたい時は
色々試してみて使い方をマスターしておく必要があるかもしれないですね。
ですが、見栄えのいいページを作る時はヘッダーのカスタマイズが必須になるのでざっと覚えるだけでもプラスになると思います。
