jquery - 異なる位置の異なる div にアイコンをフローティングするためのソリューション

Question

たとえば、次のような 2 つの div コンテナーがあります。

^^^^^^^^^^^^^^^^^^<br/>
DIV 1 container|<br />
%%%%%%%%|


^^^^^^^^^^^^^^^^^^<br/>
DIV 2 container|<br />
%%%%%%%%|

最初のもの (Div1) は Div 2 の 1 つのトップです。これらの div コーナー (左上、右上、左下、右下) のいずれかにアイコンを浮かせたいと思います。

最初の div については、jQuery を使用して div の幅と高さを取得し、角の座標を計算できるので、非常に簡単です。たとえば、最初の div ディメンションが次の場合:

1240 =幅 375=高さ

jQuery を使用してこれらの寸法を取得します。

    var heightdiv1=$('div1').height();
    var widthdiv1 = $('div1').width();

以下は、JS で計算された座標です。

右下の座標を計算する:

左=1240-1240*0.1=1116= 上=375-375*0.1=337.5

左下の座標を計算する

左=0 上=375-375*0.1=337.5

右上の座標を計算する:

左=1240-1240*0.1=1116 上=0

左上の座標を計算する:

左=0 上=0

次に、jQuery を使用してアイコンを div に追加し、position:absolute を使用してフローティング効果を得ることができます。

$('#div1').append('<a href="#"><img src="/test/icon.jpg" style="position:absolute; top: '+top+'px; left: '+left+'px"></a>');

このレシピは完全に機能しますが、最初の div に対してのみです。ページ内の 2 番目の div (DIV2) またはその他の div では、正しいコーナーに配置されません。

他の div の正しい div ディメンションを取得できると思いますが、最初の div で行ったように、特定のコーナーにアイコンを配置する方法が難しいと思います。

.offset() を使用してみましたが、コーナーの位置を計算できるかどうかわかりません。誰かがいくつかのヒントを与えることができれば、それは非常に高く評価されます. ありがとう。

score 1 · Accepted Answer

div要素position:relativeを指定し、追加するアンカー（imgではなく）要素を指定しますposition:absolute。

絶対ポジショニングを使用する場合でも、最も近い「ポジショニングされた」（つまり、ではないstatic）祖先を基準にしているため、目的のためにオフセットを計算する必要はありません。

（そして、それを機能させるために必要ではありませんが、追加する要素にインラインスタイルを使用するのではなく、それらに共通のクラスを与えるだけで、はるかにすっきりします。）

1 に答える 1