２つのimg タグの位置関係を保つ方法

やりたい事としては、ある大きな親画像が有り、その画像の中にボタンがあるのですが、そのボタンに機能を持たせたく、別なボタンだけの子画像を親画像の上に重ねて表示させたい。親画像は、width:100%;で画面幅が変化しても、子画像は常に重なるようにしたい。
position:absoluteやrelativeを使うというのはわかるのですが、具体的な方法がわかりません。

行動規範の内容に同意します

回答2件

自己解決

２つにimgタグをdivで囲って、それぞれ、absoluteとrelativeにしてやれば、できました。

投稿2019/10/06 02:57

hurousyotoku500

総合スコア27

svgを利用してください

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#img2').addEventListener('click',e=>{
4    alert("click");
5  });
6});
7</script>
8<svg width="200" height="200">
9<image xlink:href="https://placehold.jp/00ff00/ff00ff/100x200.png?text=1" width="100%" height="100%" x="10" y="10" />
10<image xlink:href="https://placehold.jp/0000ff/ffff00/200x80.png?text=2" width="100%" height="100%" x="20" y="20" id="img2" />
11</svg>