title: Scrolling image overlay on fixed image container
body: <p>I have a case when I want to make an image overlay for sold items. I made that with a php generated div with transparent png background, which is positioned absolute in the anchor container, above the product image, this is the HTML code:</p>
  
  <pre><code>&lt;div class="termekkep-holder eladva "&gt;
  &lt;a href="http://tango-antik.hu/herendi-porcelan-szololevel-alaku-asztali-kinalo-talka-a-kozkedvelt-viktoria-mintaval/" title="Herendi porcelán “szőlőlevél” alakú"&gt;
  &lt;div class="eladott"&gt;&lt;/div&gt; 
  &lt;img src="http://tango-antik.hu/wp-content/uploads/2015/10/Tango-fotok-_02241-250x250.jpg" class="attachment-termekkep wp-post-image" alt="Tango-fotok-_0224"&gt;          
  &lt;/a&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>.eladott {
  background: url(img/eladva.png) no-repeat top center transparent;
      display: block;
      position: absolute;
      background-size: 100%;
  }
  
  .termekkep-holder .eladott {
  background-position: center center;
      width: 230px;
      height: 230px;
  }
  </code></pre>
  
  <p>It works great, all until the time when the parent div gets bigger, with the need to scroll, then the overlay div stays at the screen space, and not above the image.</p>
  
  <p>Any idea how it can be solved?</p>
  
  <p>This is the link:
  <a href="http://tango-antik.hu/porcelanok/" rel="nofollow">http://tango-antik.hu/porcelanok/</a> 
  (try scrolling the inside part with the products)</p>