前提・実現したいこと
画像を親要素の枠線に重ねようとしていて躓いておりアドバイスを頂きたいです。
発生している問題・エラーメッセージ
positionプロパティを使って特定の画像を親要素の枠線の上に重ねて表示させようとしたのですが、
枠線の下に画像が潜っていってしまいます。
該当のソースコード
-----------------------------HTML----------------------------------------------------------------
<section class="a"> <img src="assets/image.png class="b"> </section>
----------------------------CSS------------------------------------------------------------------
section.a{
background-color: #fad58f;
border: 30px solid #ffffff;
max-width: 100%;
height: auto;
overflow: hidden;
position: relative;
z-index: 0;
zoom: 1;
}
img.b{
z-index: 10;
width: 10vw;
position: absolute;
top: 0%;
left: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
補足情報(FW/ツールのバージョンなど)
・画像自体は正常に表示されております。
・枠線の内側のエリアであれば、画像を重ねることができました。
→枠線のエリアに画像を持っていくと、画像が枠線の下に潜ってしまいます。
以下キャプチャになります。
青色逆三角形が画像になり、橙色の周囲にある白枠が枠線になります。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/28 12:37