Stacking/z-index issue
Hey, i'm having a little trouble getting my z-index stacking to work correctly. In this design i'm trying to recreate i'm given two separate images, a
background image and a main image. The way I've chosen to approach this has stopped interactivity with my cta as i put a negative z-index on my hero section to match the design as best i could which i have figured out is the source of the issue. I'm just not too sure on the best way to approach the stacking layout for it as this issue has proven my method isn't efficient nor effective 😅.
Here's an image of the design i'm trying to replicate and my codepen if that helps 😄 (i've taken out all of the code not relevant to the problem so some things may look a little out of place or inconsistent in the css as i've only included what is used within my navbar and hero section to avoid confusion for ya'll. This currently only works on mobile view). I'd really appreciate anyone's help whether that be suggesting a new method or tweaking the current one! Many thanks in advance!
https://codepen.io/deerCabin/pen/GRPZLBy
2 Replies
Hi snxxwyy, is it just the overlay of those pics you're struggling with? if you put
right: 0 on .hero__background-image to stretch the container over the whole screen, then width: 100% on the img element, that gets the layering of these two images to match the design, except it's showing more of the entire image than the design. But I feel like I'm missing part of the problem?Ah thank you 👍🏻. I believe the fact I’ve put a z-index on my hero section stops me from clicking on my call to action button, so I was wondering if there was a more efficient way to stack the images to stop that from happening?