Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>This is a solution to the problem as described in the comments (though not the actual question). I think it would be much faster the use <code>elementFromPoint</code> to test the area where you want to put your fixed-position element, and only worry about elements in that area. An example is here:</p> <p><a href="http://jsfiddle.net/pQgwE/4/" rel="nofollow">http://jsfiddle.net/pQgwE/4/</a></p> <p>Basically, just set some minimum possible size of an element you're looking for, and scan the entire area that your new fixed position element wants to occupy. Build a list of unique elements found there, and only worry about checking the style of those elements.</p> <p>Note that this technique assumes that the element you're looking for has the highest z-index (which seems a reasonable assumption for fixed position). If this is not good enough, then this could be adjusted to hide (or assign a minimum z-index) to each element after it's been discovered and test the point again, until nothing more is found (to be sure), and then restore them afterwards. This ought to happen so fast as to be imperceptible.</p> <p>HTML:</p> <pre><code>&lt;div style="position:fixed; left: 10px; top: 10px; background-color: #000000; color: #FF0000;"&gt;I Am Fixed&lt;/div&gt; &lt;div id="floater"&gt;OccupyJSFiddle!&lt;br&gt;for two lines&lt;/div&gt; </code></pre> <p>JS:</p> <pre><code>var w = $(window).width(), h=$(window).height(), minWidth=10, minHeight=10, x,y; var newFloat = $('#floater'), maxHeight = newFloat.height(), el, uniqueEls=[], i; for (x=0;x&lt;w;x+=minWidth) { for (y=0;y&lt;h&amp;&amp; y&lt;maxHeight;y+=minHeight) { el = document.elementFromPoint(x,y); if (el &amp;&amp; $.inArray(el,uniqueEls)&lt;0) { uniqueEls.push(el); } } } // just for the fiddle so you can see the position of the elements // before anything's done // alert("click OK to move the floater into position."); for (i=0;i&lt;uniqueEls.length;i++) { el = $(uniqueEls[i]); if (el.css("position")==="fixed") { el.css("top",maxHeight+1); } } newFloat.css({'position': 'fixed', 'top': 0, 'left': 0}); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload