我有一种情况要为已售商品制作图像覆盖层。我使用透明的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>