【Bubble】エレメントの重なり順（z-index）を操作する方法

2024年5月31日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツールBubbleでは、エレメントに自動で要素の重なり順（z-index）が設定されますが、特定の要素が他の要素の後ろに隠れてしまうことがあります。

この記事では、Bubbleで要素の重なり順を調整する方法について解説します！

特に「Bring to front」機能を活用して、前面に表示させたいエレメントを簡単に操作する方法や、具体的な事例を紹介します。

無料で資料をダウンロード

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

EPICsのノーコード受託開発特徴
支援実績・事例集
料金・サービス提供の流れ

【一分で完了】資料をダウンロード

親要素の子要素の中でz-indexを最大にするBring to front

Bubbleでは要素の重なり順（z-index）を調整するために「Bring to front」と、「Send to back」機能が用意されています。各機能の詳細は以下です。

①Bring to Front	選択した要素を親要素の子要素の中でz-indexが最も大きくなるように設定する。
②Send to back	選択した要素を親要素の子要素の中でz-indexが最も小さくなるように設定する。

この操作を行っても、BubbleのElement tree上ではエレメントの順番は変わりませんが、実際に出力されているソースコードを確認すると、z-indexの値が変化していることを確認できます。

ここまでの説明で「その機能って使うシチュエーションあるの？」と思われた方も多いはず。正解です。使う機会は多くはありません。

一体どういうシチュエーションでBring to frontが活躍するか気になる方は次項まで読み進めていただきたいです！

Bring to frontが活躍する具体的なシチュエーション紹介

サンプルシチュエーションのElement treeは上図です。一見ただのエレメント群に見えますが、最後のText 子要素４だけは、CSSでposition:absoluteを指定してGroup親要素に対して絶対位置で表示させている想定です。

右端の三点リーダーをクリックすると、ToggleアクションでText子要素４を表示するということをやってます。

このシチュエーションにおいて、Bring to frontをText子要素４に対して実行しないと、上のBefore画像のように、前面に表示させたい子要素４がユーザーアイコンの下に隠れてしまうときがあるんです。この原因が要素の重なり順。ユーザーアイコンと子要素４のz-indexの値が同じか子要素４のほうが小さくなっているので前面に表示できていないのです。

そこで活躍するのがBring to front機能！Text子要素４を選択肢、Bring to frontをクリックすればz-indexを親要素の子要素の中で最も大きく設定し直してくれるので一件落着です！