title: CSS absolute position with x scrolling
body: <p>This is the example:</p>
  
  <p><a href="https://jsfiddle.net/yaxfnmtn/" rel="nofollow noreferrer">https://jsfiddle.net/yaxfnmtn/</a></p>
  
  <p>I have a div, and I want to draw some stripes on it. It works fine unless I scroll-x on the div, where I cannot see them anymore. This is the HTML code:</p>
  
  <pre><code>&lt;div class="outer"&gt;
    &lt;div class="bg"&gt;&lt;/div&gt;
    &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.outer {
    width: 300px;
    height: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid black;
    position: relative;
  }
  
  .inner {
    width: 1000px;
    height: 200px;
  }
  
  .bg {
    background-image: linear-gradient(#eee 0.1em, transparent 0.1em);
    background-size: 100% 0.7em;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
  }
  </code></pre>
  
  <p>It's a very simplified version of what I'm trying to achieve. Setting it to <code>position: fixed</code> doesn't seem like an option?</p>