複数のオブジェクトを重ねて表示する

スタイルシートを使うと、オブジェクトを表示する位置を正確に指定することができます。ここでは、、スタイルシートを使ってオブジェクトを重ねて表示する方法を考えてみましょう。

■　オブジェクトの位置を設定

スタイルシートを使って、オブジェクトの位置を絶対位置で設定します。

<DIV STYLE="z-index:0;position:absolute;top:200px;left:128px"><IMG SRC="../../assets/images/obj9-1.jpg" WIDTH="523" HEIGHT="400"></DIV>
<DIV STYLE="z-index:1;position:absolute;top:570px;left:248px"><IMG SRC="../../assets/images/obj9-2.jpg" WIDTH="300" HEIGHT="300"></DIV>
<DIV STYLE="z-index:2;position:absolute;top:309px;left:235px;font-size:38;color:#FFFF00">
<P>季節の素材大特集！</P>
</DIV>
<DIV STYLE="z-index:3;position:absolute;top:580px;left:292px;font-size:16;color:#FFFF00">
<P>●夏ばてを防ぐスタミナサラダ<BR>
●低カロリーな海藻サラダ<BR>
●ポリフェノールたっぷりの赤ワイン<BR>
●精神不安・疲労に茯苓の炒め物</font></font></P>
</DIV>

オブジェクトを重ねるには、スタイルシートを使ってオブジェクトの位置と重ねる順番を指定するのがポイントです。この操作では、オブジェクトの位置（座標）を「top（上端からの位置）」と「left（左端からの位置）」プロパティで、重ねる順番を「z-index」プロパティで設定します。
「z-index」は、値が大きなオブジェクトほど前面（手前）に表示されます。

<<<戻る