How to overlap tab menu over another div

I attached a picture to illustrate what I’m trying to do. Not sure what I am doing wrong but I assumed the main tab menu set to absolute with a higher z index than the container I’m trying to overlap, but the contents get tucked behind div 2 no matter what I do.

Whats the correct order/ settings of div 1, and div2, to allow the menu tab to overlap?

Edit, here is my prototype I’m trying to translate into webflow

can you share preview link?

Here it is, I reset everything to relative. I should have had this done in about 5 seconds, but it eludes me.

I tried a quick slap together on my own before I saw you posted your share link

-I set the top div to 50vh, the bottom div to 50vh
-I threw the tab element into the top div
-Set the top div to flex, Row: Center, Column Center
-I set the tab width to 900 (or whatever you want)
-I made the tab absolute positioning with top selected.
-Then moved the tab down using margin

1 Like

wait wait wait, I think I misunderstood what you’re trying to do

It looks spot-on, besides adjusting the margin a bit to bring it further into div 2. The problem I ran into was the content disappearing every time I set the tabs panel to absolute.

I believe you interpreted what I’m trying to do perfectly, but let me take a closer look. If that’s the solution, then you rock!

I hope so! Let me know. I’m not sure if it’s the best way or not. Just thought I’d give it a stab to teach myself something

It worked perfectly. You actually went down the exact same trail I did, but I still had to set a higher z index on the div 1 for it to work. Did you set a z index?

Thanks by the way!

Edit: I’m also unsure why it didn’t work for me the first time I did it.

I didn’t set a z-index. I only do that once I start getting a lot of elements going on the page or if something starts to hide behind something else.

Glad it worked out for you!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.