2012年12月03日 category : Web tags :

ボックスを固定したら必要!CSSで順番を指定するプロパティ

このエントリーをはてなブックマークに追加

z-index

position要素でボックスを固定するだけでは足りません。セットでz-indexで順序を指定します。

表示位置固定の手法ですが、このブログでもシェアボタンに採用しています。左側に出ている位置をキープしているやつです。これはCSSのpositionプロパティを使っているのですが、セットで使うべきプロパティがひとつあります。

これを忘れちゃうとせっかく固定したのに意図しない状態でみれないなんてことも起こりうるのでしっかりプロパティを追加しておきましょう。

01 . どのようなことが起こるか

通常はdivなどを使ってレイアウトを骨組みするので各ボックスが重なることはないのですが、positionを指定すると位置を固定できるため平気で他のボックスに重なります。その場合、どちらを上に表示するか決めておく必要があります。

z-index-00

これが指定方法によっては隠れてしまう(意図的に隠すという使い方もある)

z-index-01

重なった部分の表示順の指定によって動作が変わるのです。

02 . 順番を決めるCSS

重なった部分の表示順は「z-index」というプロパティで指定できます。値が大きいほど上に表示されます。値はマイナス値も指定することができます。上の埋まった画像はマイナス値を指定し意図的に作りました。

この「z-index」プロパティは「position」を指定している要素に対し使えるのですが、どの要素に使えるかというより、「z-index」と「position」はセットで使うと覚えたほうが楽ちんです。

.box-sample{
	position: fixed;
	z-index: 100;
}

サイトやブログにアクションを付けることができるボックスのポジション固定ですが、固定するだけでなく表示順の設定も忘れずにしておきましょう:)

HOME >>  Web > ボックスを固定したら必要!CSSで順番を指定するプロパティ