Z インデックス順序付け
z インデックスは、複数の要素が同じ領域を占めている場合に、これらの要素をどのような順序で描くかを決めます。絶対位置または相対位置を決めて Web ページに配置した要素が重なり合う場合に、Z インデックスを設定すると便利です。
Z インデックスを設定するには、z-index プロパティを使用します。正の値に設定すると、その要素が、他の要素の前面に重なり、負の値に設定すると他の要素の背面に配置されます。次に、イメージの上にテキストを重ねる例を示します。
<html>
<head><title>Stack the Image</title>
</head>
<body>
<p style="position: absolute; top: 0px; left: 0px;">Text Over Image</p>
<img src="sample.jpg" style="position: absolute; top: 0px; left: 0px; z-index: -1;"/>
</body>
</html>
Z インデックスの値が最も大きい要素が最前面になり、Z インデックスの値が最も小さい要素が最背面に送られます。2 つの要素の Z インデックスの値が同じ場合は、これらのソースの順序によって積み重なる順序が決まります (最後にある要素が前面になります)。
.gif "Note") メモ : |
|---|
他の要素の背面にある要素を、マウスなどのポインティング デバイスで操作することはできません。目に見えるオブジェクトの前面に目に見えないオブジェクトが重なっている場合は、目に見えるオブジェクトを選択できるかのように映りますが、積み重ね順の上になっているオブジェクトの方が、選択するときの優先順位が高いので、目に見えるオブジェクトを選択することはできません。このことは、Z インデックスを負の値に設定した要素にもあてはまります。ただし、例外は、親がスクロール コンテナーの場合 (overflow プロパティが auto または scroll) と、親を手動で配置した場合 (position プロパティが absolute、relative、または fixed) です。 |
Z インデックスを動的に変更するには、次のように、z-index プロパティを設定します。
Myimg.style.z-index = 2;
IFRAME や ActiveX コントロールの一部など、要素によっては、z-index プロパティの影響を受けないものがあります。このような要素は、z-index プロパティの影響を受ける要素と正しく動作しません。
| メモ : |
|---|
位置が固定されている要素は、レンダリングされるページの別の部分と関連付けられていますが、絶対配置されている要素との相対的な積み重ね順にも影響されます。 |