CSSでレイヤーを作ろう!

三層のレイヤー

今日は、図形と図形を重ねるよ

ずらして重ねるってことですか?

その通り、これを応用すれば、前に言っていた、画像の重ね合わせもできるんだよ

早くやってみたいです!

それでは、今日のコードだよ

<div style="position:relative;width:200px;height:200px;background-color:blue;z-index:1;"></div><div style="position:absolute;width:200px;height:200px;background-color:red;z-index:2;top:70px;left:70px;"></div><div style="position:absolute;width:200px;height:200px;background-color:green;z-index:3;top:140px;left:140px;"></div>

できました!

今回のポイントは、「z-index」の値を設定することで、値が大きいほど、指定した図形が上にくるんだよ