Halten Sie jedes Element in der Div zusammen und richtig ausgerichtet ⇐ CSS

[Guest]

Im Div habe ich dieses Statistik-/Benutzernamen-Feld, das nahe am Bild liegen sollte, aber das Bild sollte etwas entfernt sein, um einen schönen Effekt zu erzielen. Nun, das Problem ist, dass ich die relative Position verwendet habe, und ich glaube, das ist nicht der Fall Das bringt alles durcheinander. Ich weiß nicht, wie ich das anders beheben und dafür sorgen kann, dass es reaktionsfähig bleibt.


css:

Code: Select all

.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;

}

html

Code: Select all

[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



```