質問: 下記画像のように、黄色で塗りつぶした**class="cover"**の中に、**class=**inner**を ネストし、更にその中に、**.hoge**が入る構造のものをレスポンシブ対応で、コーディングしたいです。 構造をコーディングしたいです。。 [**inner**と**cover**のサイズ感に関して] ・**inner**と**cover**のアスペクト比は同じにしたい。 ・**inner**は**cover**より20%小さくしたい。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/9aae263eec146e87fbdc44a0bbf1786c.jpeg) 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;**を指定することができません。 どのようにコーディングすればよいかお忙しい中、恐縮ですが、 教えていただけたら幸いです。
回答: relative にしたいのは包含ブロックにしたいということなのでしょうが、static 以外ならすべて包含ブロックになりうるのでそのままでかまいません。