Skip to content
Submitted over 3 years ago

My Profile Card!

darenhua•125
@darenhua
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

My second frontendmentor challenge.

I wasn't quite sure how I should implement the overlapping profile picture. I tried to make it with relative positioning and shifting the div upwards to overlap. Is there a better way to position css elements over other elements without relative or absolute positioning?

Community feedback

  • Lovinda Agung Pradana•45
    @LovindaAgungPosted over 3 years ago

    the solution broke in smaller screensize bro, my advice try to use multiple background and positioning for the circle svg.. peace..

    1
    darenhua•125
    @darenhuaPosted over 3 years ago

    Oh shoot!... I didn't use any media queries in this one, and only tested the site by changing the width of my 1980x1080 chrome browser to its limits. I'll do better the next challenge!

    0
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    you need to read more about relative and absolute positioning you circle element should be positioned absolute and the element you at attaching it to needs to be positioned relative. So the DIV is the parent and the Circle should live inside the parent

    The element that you want to attach something to is the parent and it should be position: relative and then item you want to position should be absolute and contained within the parent

    so if you had 10 div's with 1 img inside each then each div and img could be absolute positioned without effecting each the other divs and images they would be independent of each other

    1
    darenhua•125
    @darenhuaPosted over 3 years ago

    @palgramming I see! Thank you for the helpful comment! So, to move the actual div container around, you would move the relative positioned div?

    I'm a little confused though as if I don't want to control how the absolute position child is located within the relative parent, what's the point of just relative positioning the child element and moving that?

    0
    Patrick•14,265
    @palgrammingPosted over 3 years ago

    @darenhua the child is absolute positioned the parent is relative positioned. The parent being relative stays in normal HTML flow of elements but you are removing the child from the normal flow or stacking of elements but making it ABSOLUTE and its attachment point is the first relative parent being the element normally it is placed inside. This is important is you had multiple things positioned relative so you could make sure your Absolute child was attached to the correct element

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord