Держите каждый элемент вместе в div и правильно выстраивайте его. ⇐ CSS

[Anonymous]

в div у меня есть поле статистики/имени пользователя, которое должно быть рядом с изображением, но изображение должно быть немного дальше, чтобы придать ему хороший эффект. Проблема в том, что я использовал относительное положение, и я думаю это все портит, я не знаю, какой другой способ это исправить и сохранить отзывчивость.

Код: Выделить всё

.top-container {
display: flex;
justify-content: space-around;
padding: 15px;
}

.u1 {
display: flex;
align-items: center;
position: relative;
margin: 50px;
}

.u2 {
width: 70px;
height: 70px;
border-radius: 50%;
position: relative;
top: 70px;
right: 50px;
z-index: 1;

}

.u3 {
background: rgba(90, 211, 238, 0.166);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px 50px;
justify-content: center;

}

.u4 {
background: rgba(90, 211, 238, 0.166);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px 50px;
display: flex;
justify-content: right;

}

.u5 {
width: 100px;
height: 100px;
position: relative;
top: 70px;
right: 50px;
z-index: 1;

}

Код: Выделить всё

[img]https://cdn.discordapp.com/avatars/870413726711435297/81a888d3981c992aee63d3c99531285e.webp?size=1024[/img]
yumbo1z


[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746646052904/IMG_2820.png?ex=6782b13e&is=67815fbe&hm=7f48431c52523089dff49abed5ccb94955c049f770c4568aab9ee89d7964792c&[/img]
9,100


[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&[/img]
9,100


[img]https://cdn.discordapp.com/attachments/1134291282873810975/1327335746163441805/IMG_2821.png?ex=6782b13e&is=67815fbe&hm=f2ed76276b89fdde6bcc076191309e29d0437caf6d0f624cc7e909bca075c8e4&[/img]
9,100

Подробнее здесь: https://stackoverflow.com/questions/793 ... -correctly