0

問題を解決する方法を探しています。場所を含むマップを作成しています。場所はドットで示されていますが、position:relative; を使用しています。コンテナの上部から左上をカウントしますが、それによっては行われず、いくつかの「ドット」があるため下にシフトすることに気付きました。これを回避する方法が見つかりません。これに簡単な方法はありますか？

プレビュー:削除された、missisipy (by the sea) のドットと右側のドットを見てください。これらは同じ高さにあることを意味しますが、そうではありません..

4

3 に答える 3

1

私は position:absolute の方が良いと思います。relative は元の位置から計算されます。w3schools からの正確な引用:

相対配置要素は、通常の位置を基準にして配置されます。

ほとんどの場合、元の DOM 構造では、一方の「ドット」が他方の上にあるため、高さの位置が同じ場合、ご覧のように一方が他方よりも高くなります。

ただし、絶対的な別の直接的な w3s 引用の場合:

絶対位置要素は、静的以外の位置を持つ最初の親要素を基準にして配置されます。そのような要素が見つからない場合、含まれているブロックは html です。

静的以外の位置を持つ親要素がない限り、absolute は他に何も変更せずに機能するはずです。ある場合は、数字を作り直してください。うまくいくはずです。

修正も同様に機能する可能性がありますが、表示画面がマップ全体に対して十分に大きくない場合、問題が発生する可能性があります。これは、ここでは問題ではありませんでしたが...

于 2012-04-16T02:06:43.687 に答える
0

absolute positionning親コンテナを基準にして要素を配置できるようにする必要があります。

唯一のルールは、親コンテナも配置する必要があるということです。そのため、追加position: relativeするだけで、その位置は影響を受けませんが、配置された要素になります。

あなたの HTML:

<div class='map'>
    <span class='point p1'></span>
    <span class='point p2'></span>
    <span class='point p3'></span>
    <span class='point p4'></span>
</div>​

あなたのCSS:

.map {
    position: relative;
    [...other styling...]
}

.point {
    position: absolute;
    left: [...X coordinate...];
    top: [...Y coordinate...];
    [...other styling...]
}

ここでのデモ: http://jsfiddle.net/YYmde/

于 2012-04-16T07:17:36.667 に答える
0

あなたが抱えている問題を100％理解しているかどうかはわかりませんが、ドットがアンカータグに対して相対的に配置されているためだと思います。アンカータグを追加するたびに、前のアンカータグの下に配置されます. アンカー タグ内の div の代わりにアンカー タグを配置するとうまくいくと思います。だから代わりに

<a href="http://www.tampaport.com/" target="_blank" class="dot_class">
  <div class="dot" style="top: 255px; left: 642px; opacity: 1; " data-title="Tampa Port Athority">
  </div>
</a>

あなたは試すことができます

<a href="http://www.tampaport.com/" target="_blank" class="dot_class" style="top: 255px; left: 642px; opacity: 1; ">
  <div class="dot"  data-title="Tampa Port Athority">
  </div>
</a>

そして、アンカーを相対的な位置でブロックとして表示するようにしてください:

a.dot_class{
  display: block;
  position: relative;
}
于 2012-04-16T01:47:35.643 に答える