如何确定一个HTML元素是否在另一个HTML元素后面？

Question

I have this HTML :

HTML :

<div class="stave-container">
  <section id="Captcha"></section>
  <div id="horiz_container_outer">
     <img class="img1" />
       ...
     <img class="imgn"/>
  </div>
</div>

++++++++++++++++++++++++++++++++++++++++
+         +                            +
+#Captcha +  img | img | img | img     +
+         +  div#horiz_container_outer +
++++++++++++++++++++++++++++++++++++++++

The section #Captcha is fixed!

The div #horiz_container_outer is scrollable and contains img element!

How can i detect when a img element are behind the Div #Captcha while scrolling?

Answer 1

My Solution :

I put it into the jquery : .scroll function

    $("#horiz_container_outer > img").each(function(){
      if( $("#Captcha").offset().left > $(this).offset().left )
        {
          console.log($(this).attr("class"));
        }
    })

Answer 2

If you are attempting to have a section of the screen that doesn't scroll (which is what it sounds like, but I am not quite sure from your question) the standards compliant way to do this is:

.non-scroll-div {
  position:fixed;
}

Keep compatability in mind however: http://caniuse.com/#feat=css-fixed

Answer 3

To copy all the elements from one div to another you could do something like this:

html

<div id="fixedDiv"></div>
<div id="stuff"><span>some stuff</span><br /><hr /></div>

js

document.getElementById("fixedDiv").innerHTML = document.getElementById("stuff").innerHTML;