画像を中央揃えにしてその上に画像を表示させたい

前提・実現したいこと

HTMLとCSSを利用して画像表示をさせたいです。
具体的には、背景画像として01.jpgがあり、
これは中央揃えにします。

その上に02.jpgをかぶせ、01.jpgに対して
「左から50pxに02.jpgを表示させる」などをしたいです。

もしこれが実現できたら、次はレスポンシブデザインに対応させたいです。
01.jpgの横幅は640pxなので、
640px以上のブラウザではそのまま640pxで、
それ以下になるとブラウザいっぱいの横幅で表示させたいです。

発生している問題・エラーメッセージ

下記のソースでページを開くと、
ブラウザに対してleftやbottomが効きます。

該当のソースコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link type="text/css" rel="stylesheet" href="./main.css">
  </head>

  <body>
    <div class="relative">
      <img src="01.jpg">
      <div class="absolute">
        <img src="02.jpg">
      </div>
    </div>
  </body>
</html>

main.css

.relative {
  position: relative;
  text-align: center;
}

.absolute {
  position: absolute;
  left: 50px;
  bottom: 50px;
}

何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

サンプル
フレックスコンテナにしてセンタリングをしつつボックスサイズを最小サイズにし、01.jpgにmax-width: 100vwをつけて縮小するようにしました。

css
1body{
2  width:100%;
3  display: flex;
4  justify-content:center;
5}
6
7.relative {
8  position: relative;
9  margin: auto;
10}
11
12.absolute {
13  position: absolute;
14  left: 50px;
15  bottom: 50px;
16}
17
18.relative img {
19  max-width: 100vw;
20}