title: can't get the click position of a div element
body: <p>I want to create a minimap. So I have an accurate representation of div elements inside my minimap. I want the user to use the minimap to navigate around the site.</p>
  <p>I get the correct position when I click inside my minimap (the gray box), but when I click on a &quot;ghostly&quot; or the green box, I get incorrect dimensions, which leads to an incorrect position setting.</p>
  <p>here is a showcase:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getClickPosition(e) {
    // I need the click position of the gray box 
    // but when I click on the green or red box I get their values
    console.log(e.layerX)
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.minimap {
    height: 100px;
    width: 140px;
    background-color: #999;
    position: absolute;
    z-index: 100;
  }
  .viewport-layer {
   height: 20px;
   width: 35px;
   left: 20px;
   top: 15px;
   box-sizing: border-box;
   position: absolute;
   border: 2px solid green;
   z-index: 101;
   max-width: 100px;
  }
  .ghosty-box {
    position: absolute;
    top: 60px;
    left: 90px;
    height: 30px;
    width: 40px;
    background-color: red;
    z-index: 0; // should be in the background
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="minimap" onclick="getClickPosition(event)"&gt;
   &lt;!-- user screen: green border --&gt;
   &lt;div class="viewport-layer"&gt;
   &lt;/div&gt;
   &lt;!-- dynamic size of the minimap --&gt;
   &lt;div class="relativeLayer"&gt;
    &lt;!-- representation of the visible elements --&gt;
    &lt;div class="ghosty-box"&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>my console of <code>e</code> says something like:</p>
  <pre><code>click { target: div.ghosty-box, ... layerX: 10, layerY: 11 }
  </code></pre>
  <p>or</p>
  <pre><code>click { target: div.viewportLayer, ... layerX: 33, layerY: 16 }
  </code></pre>
  <p>I was expecting that a <code>z-index</code> would help.</p>
  <p>Do you have any suggestions to get the click position of the <code>.minimap</code> or <code>.relativeLayer</code> with elements behind it?</p>
  <p>So the <code>target</code> is <strong>always</strong> the gray box?</p>