z-indexプロパティについて
本日の教材動画はこちら
前回勉強したpositionプロパの関係性が深い、z-indexについて勉強していきます。
z-indexについて
z-indexとは、主に奥行きを指定するためのプロパティです。positionプロパでブロックの位置を固定したり、前後の位置関係がありましたよね。基本後ろに記述したものが前に来るのですが、z-indexではその前後関係を変える際に使用します。指定は数字でし、数字が大きくなるほど配置物は手前(上側)にきます。
文字だけだとさっぱりなので、実際に書きながらみていきましょう。z-indexはpositionプロパティにstatic以外の値が指定されている要素に適応することができます。なのでまずはpositionを使ったページを作ってみました。
ページの内容と外部CSSがこちらで
出来上がったページはこの様に表示されます。何も指定していないので、あとに書かれた物のほうが上に配置されていることがわかりますね。
ここにz-indexを適応してみましょう。使用方法は簡単で、「z-index:数字;」とするだけです。数字は任意です。10でも100でもかまいません。数字が大きい方が上に来ることだけ覚えておけばOKです。
こちらが実際にz-indexを使ってみたページ。赤線で引っ張ってる部分に注目してほしいのですが、数字が大きいものが上、小さいものが下側にかわったことがわかりますね。今回は順番を真逆にしてみただけですが
勿論このように変則的な重なり方をさせることも可能です。参考サイトをみていたところ、positionプロパさえ適応していれば、セレクタがpタグだろうがimgタグだろうが適応できるようです。使いこなせればデザインの幅が色々と広がりそうですね~!
【参考サイト】