在固定图像容器上滚动图像叠加层

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>