スタイルシートで背景とキャラを重ねる。

• サンプル：レイヤーで背景とキャラを重ねる。

　スタイルシートを使って、レイヤーのように背景の上にキャラを重ねてみました。

index.html

<DIV class="background">
<IMG ID="background" SRC="1.jpg" BORDER="0"><BR>
</DIV>
<DIV class="caracter">
<IMG ID="character" SRC="2.gif"><BR>
</DIV>

　背景、キャラ共に<DIV>で囲んであります。
　んでこれをスタイルシートで重ねます。

main.css

/** キャラクター */
div.caracter
{
    position: absolute;

    left: 100px;
    top: 0px;

    z-index: 1;
    overflow: visible;
}

/** 背景 */
div.background
{
    position: relative;

    left: 0px;
    top: 0px;

    z-index: 0;
    overflow: visible;
}

　背景の方はpositionをrelativeでかつz-indexを0に。
　キャラの方はpositionをabsoluteでかつz-indexを1に。
　これで重なります。

　ただ、キャラの画像は透過GIFにしないとまわりを透明にできないです。
　PNGでも試したんだけど、IE6だと透過しないです。FireFoxならちゃんと透過されるんだけど。IE7ではサポートされるみたいだけど、IE7が浸透するまで待つ……のは無理なんで、とりあえずGIFしかないなー。アンチエイリアシングまわりが面倒そうだ……。