如何放置的圖像上的圖像的右下角不有一套大小

Question

這裏是我的html

<div class="container"> 
    <img src="something" class="avatar"/> 
    <div class="edit_photo">Edit</div> 
</div> 

「edit_photo」有一個形象上的背景。 img標籤尺寸未設置，因此它可能是任何東西。但我希望「edit_photo」div始終位於img的右下角。這可能與CSS？我想不出有辦法做到這一點。 img標籤需要始終是img標籤，我無法將其更改爲div。

謝謝！

Answer 1

容器應position: relative;和edit_photo position: absolute;這樣的：

.container { 
    position: relative; 
    /* inline-block for 100% of child width */ 
    display: inline-block; 
    border: 3px solid #ddd; 
} 
img { 
    /* for 100% height of the container */ 
    display: block; 
} 
.edit_photo { 
    position: absolute; 
    right: 5px; 
    bottom: 10px; 
    /* Some color */ 
    background: red; 
    padding: 2px 4px; 
    border-radius: 3px; 
    color: white; 
} 

更新了多幅圖像演示：​​

Answer 2

寫這段代碼在CSS

.container{ 
    position: absolute; 

}

.edit_photo {

position: absolute; 
bottom:0px; 
right:0px; 
widht:20px; 
height:20px; 

}

Answer 3

edit_photo { bottom:-600 top:30px; right:5px; }

發揮與麻木ERS。

Answer 4

我認爲這是可能的：

CSS：

.container{ 
    position: relative; 
    display: inline-block; 
} 

img{ 

    background: red; 
    height: 120px; 
    width: 250px; 
} 

.edit_photo{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    background: blue; 
    height: 25px; 
    width: 25px; 
} 

這裏有一個的jsfiddle看到：http://jsfiddle.net/gW9PK/

您可能需要玩的.edit_photo和微調它了一點點。