如何检测元素位置的变化？

Question

Consider the situation where div-A has a relative position to div-B (actually, div-A is hovering over div-B by different Z-Index ). When the position of div-B changes, div-C is to be inserted before it and div-A is to be hidden.

The question is: how to detect the position changing of div-B ?

Answer 1

That all depends on can cause the divs to move, if it's a window resizing window.onresize = function(){} or in jQuery $(window).resize(function(){});
if it's caused by user interaction (like clicks and what have you): document.body.addEventListener('click',function(){},false); , where the handler is preferably a closure of sorts, that holds the initial position of the divs in question.
If it's caused by new content inserted due to an ajax call: let the onreadystatechange handler sort it out. Again, preferably use a closure to compare the position to the initial values

There might be an easier CSS3 way, I'm no designer - so I don't really know. Also: set up a fiddle of what you've tried so far an what your page looks like. And be a bit more precise about this issue. Your question is terribly vague. Read the FAQ's

Answer 2

You can use the $.position method in jquery:

  $('#element_id').position().left;
  $('#element_id').position().top;

Just store those in a variable and then actively monitor if it changes using the setInterval() method