エレメントページビルダーZ-indexの設定方法(ウィジェット表示順の指定)

WordPress エレメントページビルダーでページを作成するときに、複数の要素が重なっているときに表示順序を指定できます。 CSS Z-index 属性は、要素の重なり順を指定するために使用されます。エレメント（Elementor)では、z-index 値を指定するオプションが提供されます。

CSS Z-index属性

CSS Zインデックス属性は、複数の要素が重なるときに表示優先順位を指定できます。 Z-index値が高いほど、前面に位置します。

上の図で黄色のボックスのz-indexを3に指定すると、このボックスはz-index値が2のボックスではなく上、z-index値が4または6のボックスではなく下に表示されます。

上の図では、黄色のボックスのz-index値を7に設定すると、他のすべてのボックスの上に表示されます。

参考までに、Z-index値の最大範囲は±2147483647と呼ばれます。

特定の要素が他の要素に隠れて見えない場合、または複数のセクションを重ねるときに表示順序を指定したい場合エレメンページビルダーでは、ウィジェットまたはセクション設定パネルの 詳細タブ » レイアウトセクションの 表示順序 オプションで z-index 値を指定できます。

エレメントページビルダーの以前のハングルバージョンでは、 表示順序に翻訳され、最新バージョン（2023年11月現在）では Z-インデックスに翻訳が変わりました。

英語版ではZ-indexになっています。

表示順序（Z-index）の横にあるデバイスアイコンをクリックすると、モバイルデバイス、タブレットデバイス、デスクトップ（PC）に対してZ-indexを別に設定することができます。

エレメントでモバイル、タブレット、PCメディアクエリ分岐点を変更したい場合は、次の記事を参照してください。

モバイル機器の横画面/縦画面、タブレットデバイス横画面/縦画面、ノートパソコン、ワイドスクリーンなどについて詳細に分岐点を指定してレスポンシブレイアウトを異なる設定にすることもできます。

エレメントを活用すると、テーマへの依存を最小限に抑えながらサイトを構築できます。

以上で、エレメントページビルダーでウィジェットやセクションなどの表示順序を設定する方法について説明しました。

Avadaでも同様の機能が提供されているかどうか見てみると、Z-indexを設定するオプションは提供されていないようです。これらのオプションが提供されていない場合は、CSSを使用して特定の要素のz-indexを指定できます。