CSS, HTML, JS

Hi, I found myself struggling with this challenge! The challenge wasn't perfect as I wanted but I think I am hard stuck here. Any feedback, comments will be appreciated! Thank You!

Q1: I really struggle to get set up the image. First of all, the desktop-background-pattern was too big so it was very hard for me to position it with "position: absolute". Is there any better way to solve this?

Q2: There are 3 main Images: Box, Woman, Background. How can I make the Box on top of Woman and Woman on top Background? I manage to do some part of it but the background overflow to the top of the card which I don't know how to fix. Is there any way to have these Images in a Div, and select only the Box with "overflow: visible" and the two is "overflow: Hidden"?

Q3: The box was placed inside the Card-Container, if the Card Expense, the Box move. I try to fix this by grouping it with Woman and Background Div but it will get Hidden and not overflow. So what can I do to make the box stay still with Woman and Background, while still get it Overflow: visible to the Card-container?

Q4: I use Max-height to create a smooth look when opening the question. I feel like when I close it, it is not as smooth as I open it. What can I do to give a better User Experience?

Q5: I feel like I am really weak when it comes to positioning, could you recommend me any Videos, sources so that I can improve? It will be very appriciated!