在固定圖像容器上滾動圖像疊加層

Question

我有一種情況，當我想爲銷售的物品製作圖像疊加層時。我提出，用PHP產生具有透明PNG背景，其被定位在錨容器絕對，產品圖像上方的div，這是HTML代碼：

<div class="termekkep-holder eladva "> 
<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ú"> 
<div class="eladott"></div> 
<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">   
</a>  
</div> 

而CSS：

.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; 
} 

它的效果很好，直到父div變大爲止，需要滾動時，覆蓋div停留在屏幕空間，而不是在圖像上方。

任何想法如何解決？

這是鏈接： http://tango-antik.hu/porcelanok/ （嘗試滾動的產品的內側部分）

Answer 1

只需添加position: relative;到.termekkep-holder：

.termekkep-holder { 
    position: relative; 
} 

的想法是，當你設置position: absolute;到元素並且您希望它堅持其父，那麼您需要明確設置父母的position: relative;，即使它是默認值。這裏是一個演示，但我添加了一個外部<div>只是模仿滾動：

.eladott { 
 
background: url("http://tango-antik.hu/wp-content/themes/Tangobolt-template/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; 
 
} 
 

 
.termekkep-holder { 
 
    position: relative; 
 
}

<div style="height: 300px; overflow-y: scroll;"> 
 
<div class="termekkep-holder eladva "> 
 
<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ú"> 
 
<div class="eladott"></div> 
 
<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">   
 
</a>  
 
</div> 
 
<br/><br/><br/><br/><br/><br/><br/><br/> 
 
</div>