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

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

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

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

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

02 . 順番を決めるCSS

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

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

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

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