cssで<section>にrelativeを設定して子要素にabsoluteを設定すると、<section>に設定したbackground-imageが消えてしまう

イメージした配置にできず、困っています。
ネットでpositonについて調べたのですが、わからず、途方に暮れていました。
お助けいただけたら、幸いです。
よろしくお願いいたします。

<section>にrelativeを設定して子要素にabsoluteを設定すると、<section>に設定したbackground-imageが消えてしまいます。さらに、background-imageが消えただけでなく、imgの配置が思い通りにできないです。どこがダメなのでしょうか？以下に、コードと画像を貼り付けています。

html
<section class="feature">
        <img src="../recipe/images/feature/feature_title.svg" class="feature-logo">
        <img src="../recipe/images/feature/feature.jpg" class="feature-image">
</section>

css
.feature {
  position: relative;
  background-image: url("../recipe/images/feature/feature_bg_sp.jpg");
  background-size: cover;
}

.feature-logo{
  position: absolute;
  top: 36px;
  left: 8px;
  max-width: 10.9375rem;
  z-index: 999;
}

.feature-image{
  position:absolute;
  width: 100%;
  height: 16.375rem;
  top:60px;
  left:20px;
  z-index: 1;
  box-shadow:8px 8px #f4d4c3;
}

この画像の配置にしたいです。
イメージ説明

上記のコードでは以下の画像のようになってしまいます。
イメージ説明

Cocode

2023/02/01 16:20

コードはコードブロックの中にかいていただけると見やすくてありがたいです。質問は後からでも編集できますので、お手数をおかけしますが修正していただけると、回答を得られやすくなると思います！ ```html （ここにhtmlのコードをかく） ``` ```css （ここにcssのコードを書く） ```

回答2件

ベストアンサー

不具合の原因

背景画像が表示されない原因

position:absoluteを指定すると、その要素は浮いた状態になります。
親子関係は継続されていますが、位置関係的には質問者様のコードの.featureの中にはもう入っていない状態です。
つまり.feature要素の中に何もない状態となり、高さが0pxとなっているため、背景画像が表示されません。

ロゴと画像の配置がうまくいかない原因

.featureの中に直接<img>タグを2つ書いているため、配置が難しくなっています。

画像が変形してしまう原因

画像の本来の縦横比とは違う比率のwidthとheightを指定しているため、その比率に変形してしまっています。

対策

.featureの横幅とサイズを指定する、または、画像のうち最低1つはabsoluteを使用せず中に入っている状態にする。
- 下記でご提案している私のコードでは、後者を採用しました。
<figure>タグなどで画像2つを囲う。
- 下記でご提案している私のコードでは、.img-boxというクラス名の要素にしています。
画像が変形しないようにobject-fit: coverをつける。
- これをかくと、指定したサイズに画像が変形するのではなく、切り抜かれます。

コード例

動作確認用サンプル：https://jsfiddle.net/1e4gp36y/

html
1<section class="feature">
2  <!--figure（またdivタグなど）タグを追加 -->
3  <figure class="img-box">
4    <img src="https://placehold.jp/3d4070/ffffff/180x60.png?text=Logo%20logo" class="feature-logo">
5    <img src="https://source.unsplash.com/bIhpiQA009k" class="feature-image">
6  </figure>
7</section>

css
1.feature {
2  /* flexで画像boxを中央寄せ */
3  display: flex;
4  justify-content: center;
5  align-items: center;
6  
7  /* 上下左右に隙間を開ける */
8  padding: 6%;
9  
10  background-image: url("https://source.unsplash.com/h0Vxgz5tyXA");
11  background-size: cover;
12}
13
14.img-box {
15  /* ロゴをabsoluteで配置するための基準位置に設定する */
16  position: relative;
17}
18
19.feature-logo {
20  /* ロゴを左斜め上に配置。 */
21  position: absolute;
22  top: -5%;
23  left: -5%;
24  z-index: 999;
25  
26  /* ロゴの最大サイズは.img-boxの80%（適当に指定してみました。任意の数値に変更してください） */
27  max-width: 80%;
28  height: auto;
29}
30
31.feature-image {
32  /* 画像の横縦比を2:1にする（任意の比率を設定してください） */
33  width: 100%;
34  aspect-ratio: 2 / 1;
35  
36  /* ↑で指定したサイズに画像を切り抜き */
37  object-fit: cover;
38  
39  box-shadow: 1.5vw 1.875vw #f4d4c3;
40}

各種数値は適当なので、任意の数値を指定してください。

投稿2023/02/01 17:17

編集2023/02/01 22:09

Cocode

総合スコア2307

回答へのコメント

yura-asuha

2023/02/02 13:21

詳しいご回答ありがとうございました。悩みが解決しました。今回のことでabsoluteの動きのイメージをつかむことができました。

position: absolute;を設定した要素は通常フローから外れて浮いた状態になりますので、親要素.featureからは存在しないものとみなされます。よって.feature内に何も要素が存在しないことになり高さが0になっているためにbackground-imageが表示されません。

.featureに想定する適切な高さを設定すればbackground-imageは表示されます。

投稿2023/02/01 17:13