title: offsetX returns weird values when the mouse hovers over "position:absolute;" elements
body: <p>I have been trying to build a video player, when I came across this problem. The controls of my video player are inside a  element and I translated them to be right at the bottom part of my video. I then made a progress bar which when the user clicks, it fills upto the click and then the user can move his mouse (while holding down the click), and the bar sort of follows the user's cursor. I connect this in the background to the video and as the user drags the red bar, the video seeks to the point in time. Just like you would expect in a progress bar of a video player. The user can hold down his click and move his mouse anywhere on the screen and still the red bar will only propagate along the the x-axis only.
  Until, while holding down the mouse click, you bring your mouse over the controls and then the bar sort of gives wrong values.</p>
  
  <p>I have coded a replica of the problem below. <em><b>Notice that, if you run the snippet below, you can click on the green box and drag, and a red bar follows the cursor</b></em>, even after you bring the cursor out of the green box. <em><b>But bring your cursor over the controls (represented by the blue and maroon box) and watch what happens to the red bar.</b></em> it move backwards. This is a problem because the bar is associated with the user seeking the video. and if the bar messes up while the user is seeking, it can be really frustrating.</p>
  
  <p>Give it a try!</p>
  
  <p>This is somewhat a direct copy of my program, and I have no idea how to solve it. The video player is meant to be a plugin, so it should work perfectly no matter what the size is. I used pixels as a unit instead of %, just for demonstration. Both the controls (blue and maroon box in this case) are inside a div tag and that div tag and that div tag is set to "position: absolute;", and that div is inside another div having class="video-player" and "position: relative;" In this case I have made the body tag have position: relative; just to decrease the lines of code here .
  Note: I made these divs just to exactly replicate my codes that are misbehaving.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body style="position: relative;"&gt;
  &lt;div class= "header" style="width: 100%; height: 30px; cursor: default; background: #00aa00; display: block;"&gt;
   &lt;div class="fill" style="background: #ff0000; width: 0%; height: 100%;"&gt;&lt;div&gt;
  &lt;/div&gt;
  
  
  &lt;div style="width: 50%; position: absolute; display: block; transform: translate(0, 30px);"&gt;
  &lt;div style="width: 25%; height: 20px; display: inline-block; background: #0000aa;"&gt;&lt;/div&gt;
  &lt;div style="width: 25%; height: 20px;display: inline-block; background: #aa0000; margin: 0 20px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;p id="demo"&gt;&lt;/p&gt;
  
  &lt;script&gt;
  var a = document.querySelector('.header');
  var b = document.querySelector('.fill');
  a.addEventListener('mousedown', function(event) {
   test(event);
     document.addEventListener('mousemove', test);
      document.addEventListener('mouseup', function() {
       document.removeEventListener('mousemove',test);
      });
  });
  
  function test(event) {
   var x = event.offsetX;
      var y = event.offsetY;
      var wid = a.offsetWidth;
      var s = (x/wid)*100;
      b.style.width = s+'%';
      var coords = "X coords: " + x + ", Y coords: " + y;
      document.getElementById("demo").innerHTML = coords;
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way I can fix this problem?</p>