未分類CSSのz-indexで要素の重なりを自由に調整する方法ナナミ2018/5/292019/5/4こんにちは!ライターのナナミです。WEBサイトを作っていて、要素の重なり順を変えたい時ってありますよね。この画像は前に出したい逆に後ろに持っていきたいということで、今回は要素の重なりを調整できるz-indexについてまとめました!この記事は下記の流れで解説をしていきます。要素の重なりを調整できれば、レイアウトは自由自在!しっかり覚えて、レイアウトの幅を広げていきましょう。まとめz-indexとは?z-indexは要素の重なりを決めることができるプロパティです。紙を重ねると下の紙は上の紙に隠れて見えなくなりますよね。WEBサイトの要素も同様に、重なりが上のものが見えている状態になります。この重なっている順番を入れ替えることができるのが、z-indexです。数値の大きさで重なり順が決まるz-indexは数値で指定をします。この数値が大きければ手前に、小さければ後ろに要素を配置することができます。手前や後ろになる数値が決まっている訳ではありません。この数値に比べてこちらの方が大きいからという比較による順序づけがされています。赤い箱はz-indexの数値を10に、青い箱は100にしました。青い箱の方がz-indexの数値が大きいので、手前に表示されます。青い箱のz-indexの数値を5に変更してみると...赤い箱の方がz-indexの数値が大きくなるので、赤い箱が手前に表示されます。positionを指定していないとダメ!z-indexはpositionを指定していないと使うことができません。position:static以外、relative、absolute、fixedが指定されている要素にしか使えないのです。z-indexはpositionとセット。これはかなり重要なので、しっかり覚えておきましょう。対応ブラウザz-indexはオールドブラウザも含めて、全てのブラウザで問題なく動作します。安心して使っちゃいましょう!z-indexの使い方z-indexは下記のように記述します。数値;}数値の部分で重なり順を決めています。大きければ前面に出やすく、小さければ後ろに行きやすいわけです。この数値はマイナスで指定することもできます。動作はプラスの値と同じなので、指定できる数値の幅が広いと思っていただければ大丈夫です。*/}こんな感じで、重なり順を決めることができます。z-indexが効かない時のチェックポイント書いてある通りに実装したのに、ちゃんと重なり順の調整ができない...そんな時には、下記の2点を再確認してみましょう。positionを指定しているか前述の通り、z-indexはposition:static以外のpositionプロパティを指定していないと動作しません。重なりを変更したい要素に、きちんとpositionを指定しているかチェックしてみましょう。前に出したいものの数値の方が大きいかz-indexは指定した数値が大きいものを手前に配置します。後ろに配置したい要素と手前に出したい要素、それぞれのz-indexの数値を確認してみましょう。手前に出したい要素の方が数値が小さかったら、数値を大きくすれば解決です。z-indexの使用例z-indexはpositionとセットなだけあって、とんでもなく相性がいいです。これらを使いこなせば、WEBサイトで色々な見せ方ができます。一例を挙げてみましたので、参考にしてください。*/}ヘッダーが固定になっていると、すぐに他のページへ移動できて便利ですね。スクロールしても他の要素よりも前にあり続けるようにしてあげれば完璧です。*/}スクロールしたらメインビジュアルを後ろに隠すようにしてみました。ただのスクロールよりもちょっと面白い動きになりますね。*/}absoluteとかで高さがなくなるのは困るけど、重なりは調整したい...という時には、relativeを使えばOK!配置に影響を出さず、重なり順だけを変えることができます。まとめいかがでしたか?重なり順を自由に変えられると、見せ方や動きのバリエーションが増えますね。いろんな使い方をして、素敵で使いやすいWEBサイトを作ってみてください。使う際にはpositionの指定をお忘れなく!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。フリーターを経てフロントエンジニアになる。jQueryなどのコーディングやCMS設計に従事。文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。体は日本酒でできている。