この記事では、Z-indexを変更して、ページ上の他のオブジェクトの前または後ろにバッジアイコンを配置する方法について説明します。
プロダクトエリア：［ガイド（Guides）］（ウェブ）
問題
モーダル、ポップアップ、ドロップダウンメニューなどのコンポーネントは、アプリケーションの他の要素の前面に配置されます。このような場合に、Pendoのバッジアイコンがコンポーネントの背面ではなく前面に表示される可能性があります。
バッジアイコンの配置をコンポーネントの背面に変更したい場合は、Z-indexを調整します。
診断
以下の例では、ドロップダウンメニューの背面にバッジアイコンが配置されています。展開すると、このドロップダウンメニューのZ-index値は1,000です。
バッジのZ-indexを1,100に設定すると、バッチアイコンはドロップダウンメニューの前面に表示されます。
バッジのZ-indexを900に設定すると、バッチアイコンはドロップダウンメニューの背面に留まります。
Z-indexの値が最も大きい要素が前面に配置されます。
解決策
バッジがドロップダウンメニューの背面に留まるためには、バッチのZ-indexの値がメニューの値よりも小さくなければなりません。
ドロップダウンメニューのZ-indexは、その要素を検証することで確認できます。
- 要素を選択してメニューを表示し、［検証（Inspect）］を選択します。
- ［スタイル（Styles）］ウィンドウまたは［計算済み（Computed）］ウィンドウでZ-index値を探します。
ドロップダウンメニューの値が確認できない場合は、有効な数値が見つかるまで、バッジのZ-indexを一定の間隔で小さくすることで対処できます。
バッジアイコンのZ-index値を変更する方法は以下のとおりです。
- ビジュアルデザインスタジオ（Visual Design Studio）でガイドを開きます。
- ［アクティベーション設定（Activation Settings）］に移動し、バッジのアクティベーション設定の下にある［設定を編集（Edit Setting）］を選択します。
- ［スタイル設定（Styling）］タブを選択し、バッジのZ-indexを表示および編集します。
注：バッジアイコンのZ-indexとガイドコンテナのZ-indexの両方を編集することができます。ただし、コンテナのZ-indexを変更してもバッジアイコンの配置には影響しません。適切なオブジェクトを変更していることを確認してください。
ビジュアルデザインスタジオ（Visual Design Studio）でのガイド編集の詳細については、ビジュアルデザインスタジオを使用するの記事を参照してください。