Archived topic
How to get a container to show on top of the one above it w/ negative margin
5 replies · Started by Jessica on May 19, 2022
Hi! I was trying to create a layout of two containers -- one as the top section, then the one below with an inner container with a negative margin that shows up on top of the top container. I think I need to set different Z indexes but not sure how - I played around with 1s 2s and 3s but can't get it to show up on top. I provided the staging site link in the box below. Thanks in advance!
Hi there,
Not sure if I fully understand.
Do you have an example you can provide to show what you are trying to achieve?
For example, on the GeneratePress starter site called Shop, there's a tan section right below the hero image that says USDA Certified Organic - Eco-Friendly & Non-Toxic - and Paraben & Fragrance-Free and it shows up over the hero image section above it.
On my site, it's the white "Welcome to Pokonobe Lodge" section that I want to sit on top of the image above it by about 50-90 pixels. Let me know if that makes sense or how I can share a screenshot. Thanks!
That container has a negative margin-top set and z-index of 2:
https://www.screencast.com/t/eNAWmyNM34
Does that help?
Ahh thanks for showing that screenshot! It's working now that I put z-index 2 under outer z-index instead of inner z-index. Thanks!
No problem :)
