絶対インデックスを使用するときに、あなたのコード - ダミー

絶対配置を使用すると、配置される場所を正確に決定できるため、重なり合う可能性があります。既定では、HTMLの後半で説明する要素は、前述の要素の上に配置されます。

CSSでの処理の深さ

このデフォルト動作を変更するには、 z-index という特別なCSS属性を使用できます。 z 軸は、要素が視聴者にどれだけ近くに見えるかを示します。この画像は、この仕組みを示しています。

<！ - 1 - >

Z-インデックス では、どの要素がユーザーの近くに表示されるかを変更できます。

Z-index 属性には数値が必要です。数字が大きいほど、要素がユーザーに近いことを意味します（ 上 ）。 z-index の値は、要素をデフォルトの z-index の要​​素よりも上位に配置します。これは、他の要素の上に表示する要素がある場合（たとえば、他のテキストの上に一時的に表示されるメニューなど）に非常に便利です。 <！ - 2 - >

Z-index

の効果を示すコードは次のとおりです： zindex。 html #blueBox {

背景色：青;

幅：100ピクセル。

高さ：100ピクセル。

位置：絶対;

左：0ピクセル。

<！ - 3 - >

上：0px;

margin：0px;

z-インデックス：1;

}

#blackBox {

背景色：黒;

幅：100ピクセル。

高さ：100ピクセル。

位置：絶対;

左：50ピクセル。

上：50ピクセル。

margin：0px;

}

Z-索引の使用

このコードの唯一の変更は、

z-索引

プロパティの追加です。 Z-インデックスの値が高いほど、そのオブジェクトはユーザーに近いように見えます。 Z-index を使用するときに留意すべきことがいくつかあります：

ある要素が別の要素を完全に隠すことができます。 あなたが物事を位置付け始めるとき、ある要素は完全に別の要素によって覆われているので消滅しているように見えるかもしれません。 z-index

• 属性は、この状況を確認するのに適しています。 負の z-インデックス は問題になる可能性があります。
• z-index の値は正の値でなければなりません。負の値がサポートされていますが、一部のブラウザ（古いバージョンのFirefoxなど）ではうまく処理できず、要素が消える可能性があります。 すべての値に Z-インデックス を与えるのが最善の方法です。いくつかの要素に対して
• z-インデックス を定義し、他の要素に対して Z-インデックス を定義しないままにしておくと、何が起こるかを保証するものではありません。疑問がある場合は、すべての値に独自の Z-インデックス を渡すだけで、重複するものを正確に知ることができます。 2つの要素に同じ Z-インデックス を与えないでください。
• Z-index のポイントは、どの要素がより近くに見えるべきかを明確に定義することです。同じページ上の2つの異なる要素に同じ z-index 値を割り当てることによって、この目的を破ってはいけません。