Elementorでの制作に慣れてくると、「コンテナの上に画像を少し重ねて配置したい」といった、立体感のあるデザインに挑戦したくなりますよね。その際、マージンの数値をマイナスに設定することで、要素同士を重ねることができます。
しかし、ここで多くの人がこんなトラブルに直面します。
「重ねた画像の下にあるテキストが隠れて見えなくなった…」
「重なっている部分にあるボタンが、何度クリックしても反応しない！」
これは、要素の重なり順のルールによるものです。今回は、このイライラを数秒で解決する魔法の数値 z-index（z-インデックス）について解説します。
z-index とは？
z-index とは、簡単に言うと要素を前面・背面のどちらに配置するかを決める順番（レイヤー）のことです。
・ X軸＝横の動き
・ Y軸＝縦の動き
・ Z軸＝手前・奥の動き（これが z-index ）
Web上の要素は、机の上に置いた紙のようなものです。
後から追加した要素ほど、上（手前）に重なっていくという基本ルールがあります。そのため、マイナスマージンで無理やり要素を近づけると、意図せず見せたい文字の上に背景にしたい画像が乗っかってしまい、隠れたりクリックできなくなったりするのです。
z-index の設定場所とたった一つのルール
この重なり順は、Elementorの設定画面から自由にコントロールできます。
⚫︎ 設定場所
手前に出したい要素（または奥に引っ込めたい要素）を選択します。
[高度な設定] タブを開きます。
レイアウトの中にある z-インデックスの欄を見つけます。
⚫︎ たった1つのルール
【数値が大きい方が、手前（上）に来る】
初期状態では、すべての要素に数値は入っていません（実質「0」と同じ状態です）。
なので、「この文字を一番手前に出したい！」という場合は、そのテキストウィジェットの z-index に「1」と入力するだけで、画像の上にポンッと飛び出してきます。
具体的なトラブル解決例
よくあるシチュエーションで見てみましょう。
⚫︎ トラブル発生：
見出しテキストのすぐ下に画像を配置し、画像の上のマージンを-50pxにして、見出しと画像を少し重ねました。すると、画像が手前に来てしまい、見出しの文字が隠れてしまいました。
⚫︎ 解決手順：
隠れてしまった見出しウィジェットを選択します。
(※重なっていてクリックしにくい場合は、以前の記事で紹介した「ナビゲーター」を使いましょう)
[高度な設定] > [z-インデックス] に 「1」 を入力します。
見出しが画像の手前に表示され、無事に解決！
もし、さらにその上にNEW！などのバッジを重ねたい場合は、そのバッジの z-index を「2」にすればOKです。
【要注意】プロが気を付けるNG設定
z-index を使う上で、初心者の方がやりがちなNG設定があります。
それは、手前に出したいがために「999」や「99999」といった無駄に大きな数値を入れてしまうことです。
これをやってしまうと、後から「やっぱりあっちの画像を一番上にしたい」と思った時に、さらに大きな「999999」を入れなければならなくなり、サイトの構造がカオスになってしまいます。
また、テーマのシステムが設定している固定ヘッダーなどを隠してしまう原因にもなります。
z-index は、「基本は1、次に重ねるなら2、その次は3…」というように、小さな数字から順番に使っていくのが、美しいサイト設計の鉄則です。
まとめ
・ 要素が重なって見えない・押せない時は z-index を調整する。
・ 設定は [高度な設定] タブから。
・ 数値が大きい要素ほど手前に来る。
・ 無駄に大きな数字は使わず、「1」から順番に使う。
z-index をマスターすれば、画像の一部をはみ出させる、図形と文字を重ねる、といった、雑誌のようなリッチなレイアウトが自由自在に作れるようになります。
マイナスマージンとセットで、ぜひ使いこなしてくださいね！
