Skip to content
Submitted over 1 year ago

FAQ by Melyssa | JS and CSS

Melyssa Moya•60
@dntfindmel
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I could did this challenge with help. I have some difficult with floating and positioning objects above other things, so if someone can help me with how I could place the background and the box, I would be happy. THX!

Community feedback

  • Gio Cura•650
    @GioCuraPosted over 1 year ago

    Hi! 👋 Indeed the positioning of the background elements in this project is tricky.

    To place absolutely positioned elements on top of another, you have to play with their z-index. The z-index controls the stacking order of all things displayed on screen.

    Since items have a z-index of 1 by default, what you can do is add z-index: 2 to your card__image. This will make it go on top of everything else.

    The same principle goes for positioning the box on the desktop version! However, for the desktop layout, I also recommend you to insert the illustration and its shadow as a background-image to your card-container. That way, you wouldn't have to set your card-container to overflow: hidden. This is important, since the box itself must overflow it!

    If you want to see how this works, I'd like to refer you to my solution.

    Hope this helps!

    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