Solution for floating icons over different divs in different position
<p>For example I have two div containers like the one below:</p>

<pre><code>^^^^^^^^^^^^^^^^^^&lt;br/&gt;
DIV 1 container|&lt;br /&gt;
%%%%%%%%|


^^^^^^^^^^^^^^^^^^&lt;br/&gt;
DIV 2 container|&lt;br /&gt;
%%%%%%%%|
</code></pre>

<p>The first one (Div1) is one top of Div 2.
I would like to float an icon on one of these div corners (top-left, top-right,bottom-left,bottom right).</p>

<p>For the first div, it would be pretty easy since I could use jQuery to get the width and height of the div and compute the corner coordinates. So for example if the first div dimension is:</p>

<p>1240 =width
375= height</p>

<p>I get these dimensions using jQuery:</p>

<pre><code>    var heightdiv1=$('div1').height();
    var widthdiv1 = $('div1').width();
</code></pre>

<p>The following are the coordinates computed in JS:</p>

<p>Compute Bottom right coordinates:</p>

<p>left=1240-1240*0.1=1116=
top=375-375*0.1=337.5</p>

<p>Compute Bottom left coordinates</p>

<p>left=0
top=375-375*0.1=337.5</p>

<p>Compute Top right coordinates:</p>

<p>left=1240-1240*0.1=1116
top=0</p>

<p>Compute Top left coordinates:</p>

<p>left=0
top=0</p>

<p>Then I could append the icons to the div using jQuery and using the position:absolute to get that floating effect:</p>

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

<p>This recipe works perfectly but only for the first div. For the second div (DIV2) or any other div in the page, it won't land on the correct corners.</p>

<p>I believe i can still get the correct div dimension for any other divs but I find it hard how to position my icon on their specific corners like what I did on the first div. </p>

<p>I've tried using .offset() but I don't know if it can compute the corner positions. If anyone can give some tips, it would be highly appreciated. Thanks.</p>
