title: Determine HTML element position change
body: <p><strong>EDIT: See update!</strong></p>
  
  <p>I have the following html:</p>
  
  <pre><code>&lt;body&gt;
    &lt;span id="milestone1"&gt;
    &lt;/span&gt;   
    &lt;img id="image1" src="blabla.jpeg" style="width:400px;height:200px;" /&gt;
    &lt;div id="divOverlayOverImage1" style="position:absolute; top:100px; left:40px; width:400px;height:200px;" onclick="DoFunkyStuff();"&gt;&lt;div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>At first the <code>divOverlayOverImage1</code> is positioned over <code>Image1</code>, covering it, but if I run the code below, the <code>#divOverlayOverImage1</code> element will no longer covering the <code>#image1</code> element.</p>
  
  <pre><code>$("#milestone1").after('&lt;div style="width:500px; height:500px; background-color:blue;"&gt;');
  </code></pre>
  
  <p>I want to have an <strong>event</strong> that notifies me when <code>#image1</code> changes its position, so I can update the position of <code>#divOverlayOverImage1</code>.</p>
  
  <p><strong>NOTE:</strong> I do not have full control over the dom. the <code>$("#milestone1").after('&lt;div style="width:500px; height:500px; background-color:blue;"&gt;');</code> command is run by a third party.</p>
  
  <p><strong>UPDATE:</strong> I do not have full control of the DOM, so I cannt put a callback to the element add function, as it is not me making this call.
  Also, I cannot modify HTML like crazy. I just come to a set of websites, append and overlay to a specific image throung JavaScript and that's it. There are other competitiors that change the HTML as well.</p>