2

On a screen, to give off the illusion of 3D space between elements is not easy to do without a canvas or an engine to assist in the process. My question is whether or not you can get all of the elements that exist at a certain chosen X/Y coordinate in the browser.

Say you have two div's in a container that we can pretend is our "X/Y coordinates":

  div { 
    width: 50%; 
    height: 200px; 
    float: left; 
    background: blue; 
    color: white;
  } 
  .annoying { 
    position: absolute; 
    width: 100px; 
    left: 200px;
    height: 100px; 
    background: red; 
  }
<div id="left">
  Left side.
</div>

<div id="right">
  Right side.
</div>

<div class="annoying">
  Hmm, this gets confusing and unpredictable if I'm on the right side...
</div>

The idea is not "what can you click on?", but how can you determine what elements are in the z view at a certain pixel. If I click on .annoying when it is peering over the right side, I'd expect .annoying and #right. Clicking on the left side of .annoying would result in .annoying and #left, if that makes sense.

This has me puzzled, and I have not the closest idea of how to approach this problem. Upon searching for Stack & Google, I was not able to find much on exact pixel matching.

Jack Hales
  • 1,574
  • 23
  • 51
  • 1
    Why not use "offsetLeft" and "offsetTop"? – FlatAssembler Apr 26 '19 at 04:06
  • Thanks, I'll look into this @FlatAssembler – Jack Hales Apr 26 '19 at 04:33
  • 1
    see https://stackoverflow.com/questions/1259585/get-element-at-specified-position-javascript – holydragon Apr 26 '19 at 04:50
  • What jQuery/JS did you use? The unpredictability is due to the `float:left`. How do you know where `#left` and `#right` overlap `.annoying` if they don't have any background, border, or outline? – zer00ne Apr 26 '19 at 09:23
  • @zer00ne the width given by the element, how much it physically takes up in the DOM due to it's sizing. Ignoring the scope or the z-index, but exactly what px each element is situated at and where it "bloats". – Jack Hales Apr 27 '19 at 00:39
  • *"Bloats?"* please elaborate. You must explain why you chose the incomplete CSS styles and what do you mean *"physically takes up space?"* The space taken up by an element in the DOM has many factors, the height, width, border-width, padding, margin. and there are different aspects to measure box-sizing, absolute (length) vs. relative (offset). Need the JavaScript that you have tried plus specifics (ex. see previously mentioned properties) What you ask is too broad and vague. – zer00ne Apr 27 '19 at 01:00
  • Also without `z-index` for overlapping elements then what's the point of this: *"My question is whether or not you can **get all of the elements that exist at a certain chosen X/Y coordinate** in the browser."* – zer00ne Apr 27 '19 at 01:03

0 Answers0