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

Question

イメージした配置にできず、困っています。
ネットで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;
}

この画像の配置にしたいです。

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

Comments

[Cocode]

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

```html
（ここにhtmlのコードをかく）
```

```css
（ここにcssのコードを書く）
```

Answer 1

不具合の原因

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

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

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

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

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

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

対策

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

コード例

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

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

.feature {
  /* flexで画像boxを中央寄せ */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* 上下左右に隙間を開ける */
  padding: 6%;
  
  background-image: url("https://source.unsplash.com/h0Vxgz5tyXA");
  background-size: cover;
}

.img-box {
  /* ロゴをabsoluteで配置するための基準位置に設定する */
  position: relative;
}

.feature-logo {
  /* ロゴを左斜め上に配置。 */
  position: absolute;
  top: -5%;
  left: -5%;
  z-index: 999;
  
  /* ロゴの最大サイズは.img-boxの80%（適当に指定してみました。任意の数値に変更してください） */
  max-width: 80%;
  height: auto;
}

.feature-image {
  /* 画像の横縦比を2:1にする（任意の比率を設定してください） */
  width: 100%;
  aspect-ratio: 2 / 1;
  
  /* ↑で指定したサイズに画像を切り抜き */
  object-fit: cover;
  
  box-shadow: 1.5vw 1.875vw #f4d4c3;
}

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

Comments

[yura-asuha]

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

Answer 2

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

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

Comments

[yura-asuha]

早速のご回答ありがとうございました。
position:absolute;を設定したら、どういう動きをするのか理解することができました。
ネット上では掲載されていなかった情報でした。
ありがとうございました。