@GioCura
Posted
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!
