1

プロジェクトの一環として画像マップツールを作成しようとしていました http://jsfiddle.net/MBThE/12/

フルスクリーンの結果:http://jsfiddle.net/MBThE/12/embedded/result/

リンクをdivとして配置し、cssを使用して配置しようとしました。しかし、問題は、新しいホットスポットを追加または削除すると、他の要素の再配置に position:fixedつながることです。ユーザーが上下にスクロールしても、ホットスポットはそのまま残ります。JavaScriptを使用して上下にスクロールされたピクセル数を見つけ、スクロールが発生したときにイベントをトリガーして、divの位置を増減できるようにする方法はありますか。スクロールによると?

HTML5キャンバスとして別の代替案を検討します....しかし、それは画像の不要なサイズ変更につながります...では、divを相互に影響を与えずに、コンテナーdiv内に配置する方法はありますか?

注:-[ホットスポットの追加]ボタンをクリックし、画像をクリックしてホットスポットを追加します。ホットスポットにカーソルを合わせてホットスポットを編集します。

4

1 に答える 1

6

はい、position:absoluteは、position:absoluteまたはposition:relativeのいずれかである最も近い親に基づいて絶対的に配置されます。したがって、以下を使用して親を作成し、その中に配置することができます。

<div style="position:relative" id="parentDiv">
     <div style="position:absolute; top:15px; left:15px">I am 15 pixels from the top and left side of my parent div </div>
     <div style="position:absolute; top:30px; left:30px">I am 30 pixels from the top and left side of my parent div </div>
</div>

それが役立つことを願っています

于 2012-05-04T16:14:39.663 に答える