Positioning - absolute, fixed or sticky?

Design help General
1

Hi,

When I click on the dropdown menu, the menu list appears behind the tab links. I need the dropdown menu list to appear infront of the tab links.

I know this is happening because their ‘Relative to’ target is different. Is there any way to change the target of the ‘Relative to’ ?

If not, what Positioning do I need to change to achieve the desired result? I’m getting a bit confused.

Please refer to the images.

image
image1922×939 376 KB

image
image1918×943 377 KB

Read-only link: https://preview.webflow.com/preview/online-lubricants?utm_source=online-lubricants&preview=65dba1cebc0d6be4e62fd84dcea98593

Thank you

Here is my site Read-Only: https://preview.webflow.com/preview/online-lubricants?utm_source=online-lubricants&preview=65dba1cebc0d6be4e62fd84dcea98593
(how to share your site Read-Only link)

2

The tab menu is fixed, so that’ why it prevals on the dropdown. So either try not to have the tab menu fixed, or make the block were the dropdown is fixed as well, and give a higher z-index to it.

3

@vincent I can only change the position of the tab links to either Fixed or Sticky, but in both cases, the position is Relative to Body.

It’s already positioned to Fixed. and that’s sort of the problem. Because the dropdown is Relative to this block.

Screenshot attached for your easy reference.

image
image1913×941 325 KB