ネスト構造のボックス(孫要素の中に、<p>要素記述)をレスポンシブ対応のさせ方

Question

下記画像のように、黄色で塗りつぶした**class="cover"の中に、class=innerを
ネストし、更にその中に、.hogeが入る構造のものをレスポンシブ対応で、コーディングしたいです。
構造をコーディングしたいです。。

[innerとcoverのサイズ感に関して]
・innerとcoverのアスペクト比は同じにしたい。
・innerはcoverより20%小さくしたい。

CSSのコードとしては、下記のように書いております。
.hogeに何を書いたらよいかわからず困っております。

   .cover {
      width: 100%;
      padding-top: 96%;
      background: url("../img/hoge.png") center top no-repeat;
      background-size: 100% auto;
      position: relative;
   }

   .inner {
      width: 80%;
      padding-top: 76;
      margin: 0 auto;
      background-color: white;
      position: absolute;
      top: 10%;
      left: 10%;
   }
   
   .hoge {
     ???????????????
   }

考えていることとしては、
.innerと**.hogeに、下記を指定して、
.hogeを絶対配置にし、.inner**の中に調整したいです。

.inner { position: relative; }
.hoge {position: absolute;}

しかし、すでに**.inner**には、**position: absolute;**が指定してあるため、
**position: relative;**を指定することができません。

どのようにコーディングすればよいかお忙しい中、恐縮ですが、
教えていただけたら幸いです。

Comments

[x_x]

.hoge の要件がないのに absolute とするのはなぜでしょうか？

[toyokiti]

.hogeの内容を.innerの上の方に表示させたいです。
しかし、.innerにpadding-topを指定しているので、何もしないと下の方に表示されます。
位置を相対表示にして、topとleftを指定して上の方に表示させたいため、absoluteが必要と考えました。

Answer 1

relative にしたいのは包含ブロックにしたいということなのでしょうが、static 以外ならすべて包含ブロックになりうるのでそのままでかまいません。
https://developer.mozilla.org/ja/docs/Web/CSS/Containing_block#Identifying_the_containing_block

Comments

[toyokiti]

ご回答ありがとうございます。
特に指定せずとも、包括プロパティになることが、頂いたURLを見てわかりました。
実際、自分の環境で試しましたがうまくいきました。
ありがとうございます。