我有一种情况要为已售商品制作图像覆盖层。我使用透明的png背景的php生成的div进行了制作,该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/
(尝试滚动产品的内部)

最佳答案

只需将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>

10-05 20:49
查看更多