在邊框的左下角放置圖像

Question

我的問題非常簡單，我想在我的邊框的左下角放置一個小圖像，如下例所示。

我的代碼

.description{ 
 
    border: 1px dotted black; 
 
    position: relative; 
 
} 
 

 
.img-description{ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
p{ 
 
    padding: 20px; 
 
}

<div class="col-md-4 description"> 
 
    <img src="http://i.imgur.com/m8s1L6J.png" class="img-description"/> 
 
    <p>Some text...</p> 
 
</div>

你知道我怎麼能做到這一點？

感謝您的幫助。

Answer 1

如果你已經有了這個代碼

.img-description{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

您可以更新您的頂部和左側值以滿足你的想法。例如：

.img-description{ 
    position: absolute; 
    top: -10px; 
    left: -10px; 
} 

Answer 2

img { 
    margin-left: -5px; 
    margin-top: -5px; 
} 

Answer 3

您可以爲x和y添加一些負數transform: translate()。

.description { 
 
    border: 1px dotted black; 
 
    position: relative; 
 
    margin: 20px; 
 
} 
 
.img-description { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transform: translate(-5px, -5px); 
 
} 
 
p { 
 
    padding: 20px; 
 
}

<div class="col-md-4 description"> 
 
    <img src="http://i.imgur.com/m8s1L6J.png" class="img-description" /> 
 
    <p>Some text...</p> 
 
</div>

Answer 4

只需將您的Top和Left值更改爲負數即可。

.img-description{ 
    position: absolute; 
    top: -5px; 
    left: -5px; 
    } 

這是與新的CSS代碼：https://jsfiddle.net/939q3rco/

Answer 5

你只需要使用負值爲您top和left規則。

Like this fiddle.