2

我有一个顶栏，链接是使用浮动设置的。在其中一个链接中我有一个浮动的 div。在那个 div 中我想显示一个绝对定位的图像。我使用绝对是因为我不想显示完整的图像只会显示其中的一部分。这是通过使用 top 和 left 作为

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 中显示图像？

提前致谢。

4

3 回答 3

7

在父 div 上设置位置：

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

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

于 2013-02-13T16:34:14.270 回答
4

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

于 2013-02-13T16:34:29.903 回答
0

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

于 2013-02-13T16:34:22.393 回答