画像の上に画像が重ならない

今HTMLとCSSで画像の上に画像を重ねようとしていますが以下のコードで試しても
画像が二つ上下に並んでしまいます。
どうかアドバイスをいただけないでしょうか。

HYML
1<body>
2<h1>猫の一日</h1>
3<p>ひたすら寝ています。</p>
4<h2>猫</h2>
5<div class="relative">
6  <img src="image/1.png" alt="" />
7  <img src="image/2.png" alt="" class="absolute" />
8</div>
9</body>
10</html>
11

CSS
1
2img{
3     vertical-align: bottom;
4}
5
6.relative {
7    position: relative;
8    width: 1000px;
9}
10.absolute {
11    position: absolute;
12    left: 30px;
13    top: 0px;
14}
15
16

Lhankor_Mhy

2020/07/16 04:18

ご提示のコードを試してみましたが、問題が再現しませんでした。 ↓サンプル https://jsfiddle.net/Lhankor_Mhy/ux9mc48b/ kiichanさんの環境では上記サンプルでも「画像が二つ上下に並んで」という問題が再現しますか？もし、再現しないのであれば、ご提示いただいていない部分のコードに原因があるかと思われます。

kiichan

2020/07/16 10:25

承知しました。サンプルまでいただきありがとうございます。確認をしたところ私が質問をした内容にまちがいがありませんでした。

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

回答4件

自己解決

こちらの投稿したコードに問題はありませんでした。

私のコードでも画像は重なりました。

投稿2020/07/16 10:29

kiichan

総合スコア6

<div class="relative">
  <img src="image/1.png" alt="" />
  <img src="image/2.png" alt="" />
</div>

.relative { position: relative;}
.relative img { position: absolute;}
.relative img:nth-child(1) { top: 0;}
.relative img:nth-child(2) { top: 100px;}
コード

これでいけるかと。
topの値は変えてください。

投稿2020/07/16 03:49