Question

我有一个案例，我想为已售商品制作图片叠加层。我使用带有透明png背景的php生成的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>来模仿滚动：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: