33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

z-indexプロパティについて

本日の教材動画はこちら 

前回勉強したpositionプロパの関係性が深い、z-indexについて勉強していきます。

z-indexについて

z-indexとは、主に奥行きを指定するためのプロパティです。positionプロパでブロックの位置を固定したり、前後の位置関係がありましたよね。基本後ろに記述したものが前に来るのですが、z-indexではその前後関係を変える際に使用します。指定は数字でし、数字が大きくなるほど配置物は手前(上側)にきます。

 

文字だけだとさっぱりなので、実際に書きながらみていきましょう。z-indexはpositionプロパティにstatic以外の値が指定されている要素に適応することができます。なのでまずはpositionを使ったページを作ってみました。

ソースとCSSの中身

ソースとCSSの中身

ページの内容と外部CSSがこちらで

出来上がったページ

出来上がったページ

出来上がったページはこの様に表示されます。何も指定していないので、あとに書かれた物のほうが上に配置されていることがわかりますね。

 

ここにz-indexを適応してみましょう。使用方法は簡単で、「z-index:数字;」とするだけです。数字は任意です。10でも100でもかまいません。数字が大きい方が上に来ることだけ覚えておけばOKです。

 

z-indezで重なりを変更

z-indezで重なりを変更

こちらが実際にz-indexを使ってみたページ。赤線で引っ張ってる部分に注目してほしいのですが、数字が大きいものが上、小さいものが下側にかわったことがわかりますね。今回は順番を真逆にしてみただけですが

 

z-indezで重なりを変更

z-indezで重なりを変更

勿論このように変則的な重なり方をさせることも可能です。参考サイトをみていたところ、positionプロパさえ適応していれば、セレクタがpタグだろうがimgタグだろうが適応できるようです。使いこなせればデザインの幅が色々と広がりそうですね~!

 

【参考サイト】

重ねて表示する!CSSのz-indexの使い方【初心者向け】

z-index …… 重なりの順序を指定する

z-indexの使い方:CSSで重なり順を指定する