css - Z-Index を使用したポジショニング

Question

z-Index を使用して、ある HTML 要素を別の要素の上に配置できますか? 例:

<div>One</div>
<div>Five</div>

これで 1 つが 5 を超えているはずです....

私の質問は非常に基本的なものかもしれませんが........

score 3 · Accepted Answer

一番上に表示する必要がある要素に、より高い z インデックス値を与えます。

<div style='z-index: 2'>first</div>
<div style='z-index: 1'>second</div>

読んだ

score 1 · Accepted Answer

z-index を機能させるには、レイヤー化する各 div に対して絶対、相対、または固定に設定する必要があります。その後、および属性positionを使用して 2 つの要素を互いの上に配置できます。lefttop

z-index が高いほど、div は「高く」なります。つまり、z-index:1be abovez-index:0を使用すると、画面から手前に出てくる透明なシートのスタックと考えてください。

詳細はこちら：

score 0 · Accepted Answer

3 つの異なる div に次のような一意の ID を与えます。

<div id="divOne">One</div>
<div id="divTwo">Two</div>
<divid="divThree">Three</div>

あなたのCSSスタイルシートで：

#divOne {position:absolute;z-index:1;}
#divTwo {position:absolute;z-index:2;}
#divThree {position:absolute;z-index:3;}

score 0 · Accepted Answer

私はあなたが求めているものではありませんが、使用の要点は、z-indexある HTML 要素を別の要素の上に配置することです。

score 0 · Accepted Answer

同じ z-index は、他のレイヤーと比較して優先度が低くなります。つまり、z-index=2 のレイヤーは、z-index=1 のレイヤーの上にレンダリングされます。

<div style='position:absolute;z-index:2'>first</div>
<div style='position:absolute;z-index:1'>second</div>

5 に答える 5