margin картинок (css)

На личном странице профиля добавил обложку поверх аватарку,
Хотел поместит аватарку в серединке обложке
с помощью margin-top: -50px;
Уже несколько вариантов попробовал.
Картинки стоят не подвижным, в чем может быт ошибка

BoB, скрин!

BoB, и попробуй position: absolute;

D.TRUMP, написал
position: absolute;
Но теперь картинка криво отображается
Вот код стиля обложки:

.cover {
width: 100%;
margin:auto;
height: 220px;
position: absolute;
}

<div class="background">
<img src="background.jpg">
<img src="photo.jpg" class="top">
</div>

.background {position:relative}
.top {position:absolute;top:0;left:0;}