title: Absolutely positioned element overlapping the right side of the screen with no scrolling
body: <p>I am attempting to absolutely position a <code>div</code> of unknown height and width so that it sits partially off of the right side of my screen, while disabling scrolling to the right. It's working just fine when I attempt to do this on the <em>left</em> side of the screen. But when I try it on the right side of my screen, I'm getting problems.</p>
  <p>I've attempted to use <code>overflow-x</code> to solve this problem, but that makes the entire <code>div</code> disappear unexpectedly.</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-css lang-css prettyprint-override"><code>.parent1 {
    position: relative;
    background-color: #ddd;
  }
  
  .child1 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #00ff00;
    left: -50px;
    top: 0;
  }
  
  .parent2 {
    position: relative;
    background-color: #ddd;
  }
  
  .child2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    right: -50px;
    top: 0;
  }
  
  .parent3 {
    position: relative;
    background-color: #ddd;
    overflow-x: hidden;
  }
  
  .child3 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ff0000;
    right: -50px;
    top: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent1"&gt;
    &lt;div class="child1"&gt;
      This works on the left: half of the DIV is off the screen and un-scrollable; the other half is showing.
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="parent2"&gt;
    &lt;div class="child2"&gt;
      But when I try it on the right, I'm able to scroll the screen right and see this whole DIV.
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="parent3"&gt;
    &lt;div class="child3"&gt;
      I would expect overflow-x to solve this problem, but it hides the DIV entirely.
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/h1c0ewgt/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p>How can I make it so that my <code>div</code> is positioned off of the right side of the screen, while scrolling is disabled?</p>