Как отобразить картинку данным образом?

Question

[weazyq]

Пытался поместить картинку при помощи margin'ов необходимым способом, не получилось. Не Padding'и ни что на неё не влияет. Как можно это ещё сделать

Картинки:
Сверху вариант который нужен, снизу мой вариант

<div class="user-info">
                <img src="{{$user->url_to_img}}" id="wallpaper">
                <img src="../../public/images/avatars/weazy.png" id="avatar">
            </div>

#wallpaper{
    width: 100%;
    max-height: 200px;
}

#avatar{
    max-width: 150px;
    max-height: 150px;
    position: relative;
    margin-bottom: 20px;
}

Answer 1

[archelon]

Помимо решения с position: absolute, картинке можно задать такие свойства:
1. transform: translateY(-50px)
или
2. margin-top:-50px

Comments

[weazyq]

Да, оба твои варианта отлично работают, спасибо

Answer 2

[Wispik]

.user-info {
    position: relative;
}
#avatar {
    position: absolute;
}

для #avatar координаты нужные поставить, через left и top
и обращаться в css к блокам через id такое себе

Comments

[weazyq]

Попробую завтра

[weazyq]

В моём случае position:absolute не совсем подходит, решение второе помогло