ボーダーの左隅にイメージを配置する

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.