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

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

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

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

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

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

• ノーコード開発会社の選び方
• EPICsのノーコード受託開発の特徴
• 支援実績・事例集

氏名

法人名

メールアドレス

電話番号

送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

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

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

この操作を行っても、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を親要素の子要素の中で最も大きく設定し直してくれるので一件落着です！