Items with lowered opacity appear on top of sticky and fixed items (Got solved with Z index ordering, thnx!)

Hey, I’m wondering if anyone has reported this issue before. Seems permanent. Elements with reduced opacity show up on top of sticky or fixed elements (e.g. top nav or side panel) - the sticky or fixed element essentially behaves like it was transparent when it comes to objects with lowered opacity. (Elements with 100% opacity are not affected, they correctly ‘fold under’).

Not sharing any specific project links, my hands are full (have ten-ten projects on both my accounts, no capacity to create an extra one-pager project just to demonstrate). It’s fairly easy to recreate the problem for testing: create a sticky navbar and add a body text with lowered opacity, then scroll.

I tried recreating this issue using a sticky nav created from divs, and sections with different opacity of images and it all seems to work fine…
Am I missing something?

This is what I created
https://preview.webflow.com/preview/elis-superb-project-c37520?utm_medium=preview_link&utm_source=dashboard&utm_content=elis-superb-project-c37520&preview=b43fd71fa8fa9df893f326e55f8da384&mode=preview

No, right. Nothing. No problem with yours. It’s happening to nearly every project I’m working on.

So, this is what I’m facing…just start scrolling. Note that I didn’t use an actual nav-bar, if I drag and drop a nav bar and place the div-block inside it, then no problem. I tried, it works fine.

I’m using Webflow for prototyping, not exactly for website-building, so I didn’t bother much to drag and drop an actual nav bar. Problem is, this same thing occurs with side-panels, too (which are not nav bars, but now I’m thinking maybe I can cheat and just drag and drop a navbar then delete the contents, if that what it takes…) Objects with lowered opacity are visible through the side panel.

I tried to re-create the side panel problem by copy-pasting elements from my projects, but everything was fine this time. With fixed side-panels, the issue sometimes occur, sometimes doesn’t, honestly I’m lost. It doesn’t bother me too much, I’ve gotten used to it, but it seemed like something that should not normally occur (as the problem isn’t happening to 100% opacity elements).

You should be able to see what I mean from this example I quickly made, link below:

https://preview.webflow.com/preview/opacity-test?utm_medium=preview_link&utm_source=designer&utm_content=opacity-test&preview=39852b612d6e946c898e5b8121e625ac&mode=preview

1 Like

I see what you mean…

Setting Z index to 1 to the nav bar will solve it in this case (or in any case).

1 Like

Ohhh. Yes, it worked… What does the Z index do? So, it’s always 1, even with the side panels, right? Thanks! I think I can mark it as resolved! I thought it was a bug, cuz only these faded items are being affected.

I’m happy it solved for you…

Z index is basically ordering the layer, what comes on top of the other.
As higher the number of Z index, the more on top of other layers it will be…

Here is a video expelling it…

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