浮动 div 中的绝对定位图像答案

【问题标题】：absolute positioned image in a floated div浮动 div 中的绝对定位图像
【发布时间】：2013-01-29 06:27:15
【问题描述】：

我有一个顶栏，链接是使用浮动设置的。在其中一个链接中我有一个浮动 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 中显示图像？

提前致谢。

【问题讨论】：

你能不能给我们一个小提琴，这样就容易回答了！
为什么不使用图像作为该 div 的背景？
将 position:relative 添加到 div.cont。还有为什么你有一个相同值的最大和最小宽度？为什么不直接使用width，因为您已将溢出设置为隐藏

标签： css image html absolute

【解决方案1】：

在父div上设置位置：

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

当你绝对定位某个东西时，它是相对于下一个定位的祖先定位的。如果您不指定定位，则祖先将是主体。

【讨论】：

【解决方案2】：

默认情况下，绝对定位的元素是相对于视口定位的。将 position: relative 添加到您的浮动 div。这会将图像相对于其父级定位在内部，而不是相对于视口。

【讨论】：

【解决方案3】：

在 img 上使用 margin-top 和 margin-left 代替 left: 和 top:`。

【讨论】：