0

すべての州議会議事堂の場所にプッシュピンが付いた国の地図が必要であり、国の地図のサイズを変更できるようにしたいと考えています。これにより、拡大または縮小すると、押しピンが自動的に画面上の正しい新しい位置。

これはパーセンテージポジショニングで可能ですか? プッシュピンに絶対位置が指定されている場合にのみ、プッシュピンを他の画像の上に配置できましたが、サイズ変更時にプッシュピンの位置を再計算する必要があります。

プッシュピンをtop: 50%; left 50%国の地図画像または国の地図画像を含む div に対して相対的に配置する方法はありますか?

4

1 に答える 1

1

一般に：

ラッピング要素をにposition:relative.設定します。これにより、絶対位置の子の原点が設定されます

子要素をに設定し、and (または right: と bottom:) をピクセル単位で指定しますposition:absolute。top:left:

プッシュピンの場合、インライン画像ではなく、CSS 背景を設定したいでしょう。

<div class="pin pinA"></div>

CSS:

.pin {
   position:absolute;
   height:20px;
   width:20px;
   background-image:url(...);
   background-repeat:no-repeat;
}

...次に、配置に 2 番目のクラスを使用します。

.pinA {
     top:50px;
     left:300px;
}

次に、pinB、pinC などのエントリを作成し続けることができます。

于 2013-03-04T19:52:36.923 に答える