Zインデックスを使用して要素を最前面または最背面に移動する

Zインデックスとは何ですか?

Z-indexはCSSプロパティであり、 重ね順 ウェブページ上の要素の重なり具合、つまり要素が重なり合った場合にどの要素を最前面に表示するかを決定します。Zインデックス値が高いほど要素は前面に表示され、低い（または負の値）ほど他の要素の背面に表示されます。

Zインデックスの重要なルール

• 正の値 （例：10、100）要素を持ち込む フォワード スタック内。
• 負の値 (例: -1) 要素をプッシュする 背後に その他。
• より高い値 常に下位のものより前に現れます。
• 重要: Zインデックスは要素にのみ適用されます 同じレイヤーまたはセクション内また、 親子階層つまり、子要素は親のスタック コンテキストから視覚的に逃れることはできません。

GemPagesでZインデックスを調整する方法

GemPages エディターで要素の Z インデックスを直接制御するには、次の手順に従います。

ステップ1：要素間の重なりを作成する

• 位置を変更する要素をクリックします。
  
• 左側のサイドバーで、 高機能 タブには何も表示されないことに注意してください。
  
• マージンとパディング、適用します 負のマージン (たとえば、左側) をクリックして、同じ行またはセクション内の別の要素と重なるように要素を移動します。
• Video Cloud Studioで 高機能 タブ 設定サイドバーで マージンとパディング を適用します 負のマージン 要素の左側にあります。
• これにより、要素が左側の要素と重なるように移動します。
  

この手順は、Z インデックスの変更による視覚効果を確認するために必要です。

ステップ2: 位置とZインデックスを設定する

• 前面（または背面）に表示する要素をクリックします。
• 設定パネルの [詳細設定] タブで、位置プロパティを見つけます。

• 位置を次のいずれかに設定します。
  • 相対: 要素を通常のレイアウト フロー内に保持しますが、スタックを許可します。
  • 絶対: レイアウト フローから削除し、最も近い配置された祖先を基準にして配置します。

• 次に、Z インデックス フィールドまで下にスクロールします。
  • 要素を前面に移動するには、正の値 (例: 2、10、100) を入力します。
  • 後方に送信するには、負の値 (例: -1) を入力します。

例: 「相対」を選択し、Z インデックスを 2 に設定すると、要素が重なり合うコンテンツの前に配置されます。