Question

我有一个顶部栏，并使用float设置链接。在其中一个链接我有一个浮动的div.In div我想显示一个绝对定位的图像。我使用绝对因为我不想显示完整的图像只显示其中的一部分。这是通过使用顶部和左侧

来实现的

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;
}

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

Answer 2

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

Answer 3

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

浮动div中的绝对定位图像

3 个答案: