Поместите изображение в левом углу границы

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

Просто просто измените значения верхнего и левого значения на отрицательные.

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

Здесь с новым кодом CSS: https://jsfiddle.net/939q3rco/

Answer 5

Вам просто нужно использовать отрицательные значения для top и left правил.

Like this fiddle.