画像をHTMLで重ねようと思ったのですが、 ブラウザ画面の縮小を行うと重ねた画像位置がずれてしまいます。 どんな画面でも同じ位置に画像を重ねるためにはどうすればいいでしょうか。 HTMLの記述もネットの記述をコピペしていることが多いので そもそもの記述が間違っている可能性もあります。 大変わかりにくいと思いますが、何卒宜しくお願いします。
HTML
1<div style="position: relative;"> 2 <p> 3 <img alt="" src="*****.png" style="width: 750px; height: 1000px;" /></p> 4 <div style="position: absolute; top : 680px; left : 1000px;"> 5 <a href="#teiki1"><img alt="" src="*****.png" style="width: 280px; height: 280px;"class="keyframe5 animation" /></a></div> 6</div>
試したこと
css側で「relative」「absolute」の設定を試しましたが、
画像が重ならずうまく行きませんでした。
補足情報(FW/ツールのバージョンなど)
下記は、ボタンの画像となっており動きを加えるため使用しています。(こちらは思い通りになっています)
a href="#teiki1"
keyframe5 animation
>【パンパンの初心者です】
意味がわかりません。ひとまず質問に「初心者アイコン」をつけるに留めてください
すみません。目立つようにしてしまいました。。
修正して、別途質問します。
別途する必要はないです。
この質問を修正してください
有難う御座います!
編集完了しました!
コードはマークダウンのcode機能にてご提示ください
あと「重ねる」というのは完全に重なり、後ろのものは見えなくなる状態を意図していますか?
完成形を図示されたほうが良いかと思います
改善いたしました!
>あと「重ねる」というのは完全に重なり、後ろのものは見えなくなる状態を意図していますか?
上記に関しては、画像の添付を行いました。
見えなくなるのではなく、横に移動するような状態です。宜しくお願いします。
コードのマークダウンができていません。
投稿前にプレビューでご確認を。
失礼いたしました。。コードの改善を行いました!宜しくお願いします。
画像をみると、画面縮小でそれぞれの画像も縮小していますが、別のところでCSSを設定したりしてませんか。
提示のコードだと絶対値で固定サイズ、固定位置表示になってますので、画面サイズを変更してもレイアウトに影響はないはずです。
なるほど。。もう少しため試してみます!有難うございました!
ちなみに、CSSをインラインで記述するのではなく、head内にStyleタグで記述するか、CSSファイルに記述するようにして、HTMLとスタイルを分けた方がいいと思います。
CSSはどこに書く?外部CSSファイルの読み込み方&インラインでの書き方
https://saruwakakun.com/html-css/reference/where-css
あなたの回答
tips
プレビュー