絕對定位圖像浮動div

我有一個頂部的酒吧和鏈接設置使用float.In其中一個鏈接我有一個浮動的div。在該div我想顯示一個絕對定位的image.I使用絕對因爲我不想表現完整的圖像只是其中的一部分會被字符：顯示通過使用頂部實現，留給絕對定位圖像浮動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中顯示圖像？

在此先感謝。

來源

2013-02-13 harikrishnan.n0077

你能否給我們提供一個小提琴，以便它很容易回答！ – 2013-02-13 16:27:48

爲什麼不使用圖像作爲該div的背景？ – 2013-02-13 16:33:19

將'position：relative'添加到div.cont。也爲什麼你有一個相同的值的最大和最小寬度？爲什麼不使用'width'，因爲你已經將你的溢出設置爲隱藏 – Pete 2013-02-13 16:37:22

設置父DIV位置：

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

當你絕對定位的東西，它相對於下個定位祖先的定位。如果你沒有指定定位，那麼祖先將是身體。

來源

2013-02-13 16:34:14 j08691

使用margin-top和margin-left而不是left:和top：`on the img。

來源

2013-02-13 16:34:22 dezman

不起作用，因爲它會移動整個圖像 – 2013-02-13 16:37:27

默認情況下，絕對定位的元素相對於視口進行定位。將position: relative添加到您的浮動div。這將使圖像相對於其父母而不是相對於視口定位。

來源

2013-02-13 16:34:29 zakangelle

絕對定位圖像浮動div

回答

相關問題