Menu
With jQuery how do i find out if div one is over div two? Not, which z-index is higher but what div is visually over the other div.
<style type='text/css'>
#one {
position:absolute; top:0; left:0; width:100px; height:100px; background-color:red; z-index:2;
}
#two {
position:absolute; top:0; left:0; width:100px; height:100px; background-color:green; z-index:1;
}
</style>
<div id='one'></div>
<div id='two'></div>
252
To check if two elements overlap, use the getBoundingClientRect() method to get an object containing information about the relative position to the viewport of the elements. Then, compare the boundary edges (top, right, bottom, left) of the two rectangles. Here is the HTML for the examples in this article. Copied!
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute , fixed , or relative ).
contains() method checks if an element is inside another, and returns a boolean: true if it is, and false if it's not. Call it on the parent element, and pass the element you want to check for in as an argument. // returns true main.
Use CSS position: absolute; followed by top: 0px; left 0px; in the style attribute of each DIV. Replace the pixel values with whatever you want. You can use z-index: x; to set the vertical "order" (which one is "on top").
You can use the offset method (here) to get the space from the document edges. Add the width and height of the elements, and substract the numbers.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
