Streaming live at 10am (PST)

How to overlap tab menu over another div


#1

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?

Thanks!
Edit, here is my prototype I'm trying to translate into webflow


#2

can you share preview link?


#3

https://preview.webflow.com/preview/outthinkbeta?preview=22aaa08d36b674e6948ab2125d4f2701

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


#4

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


#5

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


#6

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!


#7

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


#8

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.


#9

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!


#11

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