title: Javascript math "draw" rectangles around multiple other rectangles to achieve backdrop effect
body: <p>Note: I will use the word <em>overlay</em> interchangeably with <em>backdrop</em>.</p>
  
  <p>I'm currently working on a guide mode and I highlight elements to make them stand out from the darker semi-transparent background.</p>
  
  <p>So basically, I have a selector for the element that I want to not be overlaid, and then I surround it with semi-transparent dark divs, simulating an overlay with an excluded element.</p>
  
  <p>My solution works great for one highlighted element, but when that number becomes 2+, it becomes hard to calculate how to place the black divs around those elements. And the thing is: The highlight needs will vary significantly from page to page - it's not like those multiple elements will be static.</p>
  
  <p>So to illustrate my issue:</p>
  
  <p><a href="https://i.stack.imgur.com/NGwOo.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NGwOo.png" alt="enter image description here"></a></p>
  
  <p>Here you can see the different boxes that need to be put into the page in order to surround Box2 and Box2 with the semi-transparent dark divs, basically simulating the overlay effect with highlighted elements. For one case like this one, I can <em>hardcode</em> the calculations and everything would be fine, but <strong>what if</strong> Box1 was higher up than Box2? Then what if they were not overlapping each other horizontally anymore? What if there is a Box3 that needs highlighting?</p>
  
  <p>In either case, I wouldn't know how many dark boxes to place and where to place them.</p>
  
  <p>Is there any mathematical formula that would help me in this case? The use of jQuery is also possible as it's included in my project.</p>
  
  <p>How would I approach this problem and make it extendable (multiple boxes, different positions)?</p>