CSS position: relative; position: absolute; の使い方について

Question

CSSの孫要素の扱いについて教えていただきたいです。

やりたい簡単なイメージです。

やりたいこととしてはAの枠の中にB,B-2、C,C-2が収まってる
かつBの中にB-2が、Cの中にC-2が収まるようにしたいです。

<div class="device">
			<div class="A">
			  <img class="B" src=".png">
			  <img class="B-2" src=".png">
			
			  <img class="C" src=".png">
			  <img class="C-2" src=".png">
		      </div>

このように記述した場合のCSSの記述がわかりません。

※見づらかったので、まとめてます。

.A,.B,.C {
    position: relative;
}

.B-2,.C-2 {
    position: absolute;
}

これなのか、

.A {
    position: relative;
}

.B,.C,.B-2,.C-2 {
    position: absolute;
}

こちらなのか、それとも別なのか。

ご教授いただきたいです。
よろしくお願いします。

Answer 1

background-imageを使用
https://codepen.io/fazfwez12zdf/pen/rNmaWVp

Comments

[Flaycat]

ご回答ありがとうございます。
B-2,C-2の画像は変更が必要なものなので1枚の画像にすることができません。

[Jon_do]

BとCはimgである必要はありますか？
装飾が目的なら下記のようにdivで囲んで
background-imageを使用したほうが良いかと思います。

<div class="A">
<div class="hoge">
<img class="B-2" src=".png">
</div>
<div class="hoge2">
<img class="C-2" src=".png">
</div>
</div>

[Flaycat]

ご回答ありがとうございます。

BとCはPCとスマホの枠になります。
その後ろに可変のB-2，C-2があるためimgで設定しています。

background-imageでも重ね順として後ろにB-2，C-2を配置することは可能でしょうか？

[Flaycat]

コードありがとうございます。
無事設定できました。

Answer 2

前者でもできないことはないと思いますが、後者の方がいいと思います。

Comments

[Lhankor_Mhy]

と思ったのですが、どちらでも位置調整が必要なので、どちらでもよさそうな気がしてきました。

できれば、HTMLをもう少し変えたい感じですね。

[Flaycat]

ご回答ありがとうございます。

なにかHTMLでいい案はありますでしょうか？
もしご存じであればご教授いただければと思います。

[YA-METAL]

前者の場合,B-2,C-2の対応するrelativeはAになります。BとCにrelativeを書いても意味ありません

[Lhankor_Mhy]

B群とC群にそれぞれラッパー要素を設けた方がいいんじゃないかと思います。

[Lhankor_Mhy]

> YA-METALさん

もしかして、私宛ですかね？

それはその通りなんですが、前者の方はBとCが重ならないので、その点では absolute より少し楽かもしれません。（もちろん、それなら static でいいわけなのですが。）
どちらにせよ、B-2,C-2の水平位置を指定する必要があるので、どっちでもいいかな、と。

[Flaycat]

ラッパー要素を使ったことがないのですが、どのような記述をするのでしょうか？

[Lhankor_Mhy]

div要素で包めばいいと思います。