css - float div 中的绝对定位图像

Question

我有一个顶部栏，链接是使用 float 设置的。在其中一个链接中，我有一个 float 的 div。在那个 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;
}

当您绝对定位某物时，它是相对于下一个定位的祖先定位的。如果您不指定定位，则祖先将是正文。