浮动div中的绝对定位图像

Question

我有一个顶部栏,并使用float设置链接.在其中一个链接我有一个浮动的div.In div我想显示一个绝对定位的图像.我使用绝对,因为我不想显示完整的图像只显示它的一部分.这是通过使用top和left as来实现的

CSS

div.cont{
    max-width:50px;
    min-width:50px;
    height:50px;
    overflow:hidden;
}
img{
    position:absolute;
    width:100px;
    height:100px;
    top:-10px;
    left:-15px;
}

HTML

<div style="float:right;">
    <div class="cont">
        <img src="image url"/>
   </div>
</div>

但是,由于图像是绝对定位的,因此它显示在div之外.

怎么能克服这个并在div中显示图像？

提前致谢.

Answer 1

设置父div的位置:

div.cont{
      max-width:50px;
      min-width:50px;
      height:50px;
      overflow:hidden;
      position:relative;
}

当你绝对定位时,它相对于下一个定位的祖先定位.如果你没有指定定位,那么祖先就是身体.