親と同階層の要素にposition:relativeがある場合のposition:absoluteについて

Question

前提

![

図のように、.mapを親に持つ.imgと.pinがあります。
.mapと.imgにはposition: relativeが設定されており、.pinにはposition: absolute;が設定されています。
.imgは、.mapの領域内のみを表示していて、マウス操作で拡大縮小して見える範囲を変更できる仕様となっています。　
画像が拡大縮小されると.pinの位置もその分ずれる仕組みになっています。(JavaScript)

実現したいこと

現状では、.pinの位置は.mapが基準になっていると思いますが、これを.imgを基準にするにはどのようにコーディングすればよろしいでしょうか。
階層を分ける等、.imgが基準になるよう工夫ができればいいのですが・・・
他にもいい方法があれば教えていただけると助かります。

該当のソースコード

<div class="map">
	<img src="#" class="img">
	<img src="#" class="pin">
</div>

.map_box{
	width: 700px;
	height: auto;
	overflow: hidden;
	position: relative;
}

.map_img{
	width: 1000px;
	height: auto;
	position: relative;
	top: -100px;
	left:-200px;
}

.map_img2{
	width: 30px;
	height: 30px;
	z-index:99;
	position: absolute;
	top: 100px;
	left: 200px;
}
	

Comments

[Lhankor_Mhy]

.pin は、ご提示のコードで言うとどれに当たりますか？
.map は .map_box のこと、.img は .map_img と .map_img2 のことだという理解で合っていますか？

[user202102]

申し訳ございません、.pinは.map_imgに当たります。コードを修正します。

[Lhankor_Mhy]

ご修正ありがとうございます。
HTMLは修正されているようですが、CSSはそのままのようでした。
（正しいコードの想像はつきますが）

Answer 1

そのままのHTML構造だと難しいので、.imgをラップしてはいかがでしょうか。

<div class="map">
    <div class="img-wrapper">
        <img src="http://placehold.jp/150x150.png?text=img" class="img">
        <img src="http://placehold.jp/000000/666666/30x30.png?text=pin" class="pin">
    </div>
</div>

/* ... */

.img-wrapper{
  width: max-content;
  height: auto;
  position: relative;
  top: -100px;
  left:-200px;
}

img{
  display: block;
  width: 1000px;
}

/* ... */

Comments

[user202102]

意図した挙動を確認できました。ありがとうございます！