レイヤーを画面の左右中央に重ねて配置したい

質問No.1083158：レイヤーを画面の中央に配置したい　を見て、おお、これだ！と思って試してみましたが、レイヤーを重ねることはできませんでした。

"position:absolute;"を指定しないとレイヤーを重ねられない（ですよね？）、でもそうするとセンタリングできない、ということでしょうか？

現在は、レイヤーの幅を100％にして「中身」をセンタリングしたものを重ねていますが、これだと他の要素（特にリンク）の上に重ねられないのでレイアウトに制約があります。

上下方向の位置とサイズを指定した複数のレイヤーを重ねる方法はないのでしょうか？

No.1 ベストアンサー 回答者： fruit893 回答日時： 2005/11/11 00:07

divタグの重ね方がカギです。

style="position:relative;width:幅px;height:高さpx"を外枠に付加して、さらにその外側をalign="center"で囲います。

例:

<div align="center">
<div style="position:relative;width:200px;height:200px;background:black">
<div style="position:absolute;left:0px;top:0px;width:200px;height:200px;background:blue">
a
</div>
<div style="position:absolute;left:20px;top:20px;width:40px;height:40px;background:red">
b
</div>
</div>
</div>

この回答への補足

早速試してみました。
Windows版IE5.5、Firefox1.0.7とMAC版IE5.1.7、Netscape7.1で全て完璧に表示できました、感謝！。
position:relativeはいまひとつ使い方がわからなかったのですが、こういうふうに使えるんですね。
また、レイヤーを重ねるにはz-indexで指定するしかないと思いこんでいました(^_^;)
本当にありがとうございました。

補足日時：2005/11/11 01:57

この回答へのお礼

簡潔でかつ非常にわかりやすい例をありがとうございました。目からウロコが落ちるとはこのことですね。

お礼日時：2005/11/11 01:56