蒼月邸

WEBデザイナーとかマークアップエンジニアやってる人がメモ程度にPHP,CSS,Javascript,jqueryなど書いていきます。

【CSS】固定ヘッダーとか作った時に役立つ「z-index」指定して最前面に

2017年3月13日 1,226 Views

CSS

最近のWEBサイトのデザインではほぼ当たり前になりつつありますが、画面上部に固定されるグローバルナビゲーションとかあるサイトってスタイリッシュで利便性もあってカッコイイですよね。

ブランド名(ロゴ)を表示し続けることで名前を覚えてもらえる効果もあったりします。スマートフォンだと表示幅が限られてしまいますが、グロナビに更にボタンをつけてメニューを表示するなど、カスタムの幅はかなり広いですね。

ってことで私どももよく使ったりします。しかし!一見、平面上に見えるHTMLにも奥行き(Z軸)が存在するのです。

奥行きを操作!positionの罠とz-indexの使い方

固定ヘッダーにはposition: fixed;を使いますね。画面に対して場所が固定になるってヤツ。普通に使ってればfixedした要素は画面の最前面に来るはずですが、

このように、たまに画像とか要素に隠れてしまう場合があります。これは大体が下の要素にposition:が指定されてたりします。

そこでz-indexの出番です。前面に置きたい要素にz-indexを指定します。

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

数字が大きくなるほど前面に来るようになっています。ここでは、ヘッダーより前面に来る要素は無いため9999ぐらいで指定してみましょう。

→DEMOはコチラ

デモを確認してみてください。z-indexを指定していないヘッダーはposition: relative;が指定されている画像や見出しに隠れてしまいますが、z-indexを指定したヘッダーは隠れることがありません。

まとめ

  • positionを持っている要素は前後が狂いやすい
  • z-indexを指定すると数字が大きい順に重なる
  • 上手く行かないときはそれぞれの要素の関係性を理解する(親子要素・兄弟要素など)

アドセンス

アドセンス


コメント

関連記事

【CSS】だけで実装する少し凝ったデザインのパンくずリスト

パンくずリスト。この記事のタイトルの上にある「 HOME > CSS > 」みたいなヤツですね。元々は自分がどの階層に居るのかを把握しやすくするためにあるらしいですが、最近のブログでは直上 …

【jQuery】スマホサイトでボタンやリンクのレスポンス(反応)が悪い時の対処方法

スマホでタップしてもボタンの反応が悪い! こんばんちゃん。最近よくjQueryを使ってボタンやリンクを作る事が多いのですが、スマホでプレビューして動作チェックとかしてると、微妙にボタンの反応が悪い時が …

著者:Haru