下記画像のように、黄色で塗りつぶした**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;**を指定することができません。
どのようにコーディングすればよいかお忙しい中、恐縮ですが、
教えていただけたら幸いです。
回答1件
あなたの回答
tips
プレビュー