| ポイント |
<![CDATA[
<div style="position:absolute;top:0px;left:0px;background-color:yellow;z-index:1;" onMouseover="this.style.zIndex=3" onMouseout="this.style.zIndex=1">
]]>
|
| 説 明 |
奥行きを指定するには、あらかじめスタイルシートのz-indexでZ座標を指定しておきます。Z座標は手前に来るほど値が大きくなります。JavaScriptでZ座標を操作する場合は「document.all["オブジェクト名".style.zIndex」のように指定します。サンプルのように直接タグ内に記述する場合は「this.style.zIndex」のようになります。thisは自分自身を示します。この場合は表示されている文字そのものになります。divはブロックタグであり文字や画像などを入れることが出来ますが文字単位で処理したい場合はインラインタグであるSPANを使います。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>文字の重なり順を変える</title>
</head>
<body>
<div style="position:absolute;top:0px;left:0px;background-color:yellow;z-index:1;" onMouseover="this.style.zIndex=3" onMouseout="this.style.zIndex=1">
下にある文字<br>
ここにマウスを乗せると<br>
上に表示されます。<br>
</div>
<div style="position:absolute;top:20px;left:30px;background-color:#FFDF80;z-index:2;">
上に重なっている文字<br>
ここのZ座標は固定して<br>
あります。<br>
</div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
文字の重なり順を変える