Streaming live at 10am (PST)

Unable to select z-index layered content in designer

I am designing a page that has an overlay menu that has an opacity set to 0 until it’s button is clicked. Its container has a z-index set to 100 to ensure it always appears above the rest of the page’s content. The good news is that it works perfectly. The bad news is that I can’t seem to edit any of the content, such as a text block, because every time I click into the text block to edit, Webflow automatically selects the overlay wrapper layer.

Is there a workaround for this or a way to lock / hide the overlay layer so that the rest of the content can be edited?

I’m completely stuck.

Thanks for any help / suggestions!


UPDATE#3: It seems changing the overlay container’s z-index to -1, allows me to select the rest of the containers. Still seems a bit of a weird workaround.

UPDATE #2: Well that was a short lived solution. I tried to select another text block and again it automatically selects the overlay element that has a fixed position, even though it’s z-index is set to 0

UPDATE: Ok- since posting I think I found a work around, I switched the overlay containers z-index back to 0 and I am able to now select the content below. This will allow me to work, but every time i want to test, I will have to select that container and switch the z-index and opacity. This is a little cumbersome. What would be great in future releases, would be able to select elements and “hide” them, so that other elements can be worked on.

Hey @kbowman Could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots really helps us to help you faster :slight_smile:

How to share a read-only link:

Thanks in advance! :slight_smile:

Sorry, I actually put a screen shot in the post but forgot to hit update. I can provide a read only link but please note that I am currently using the aforementioned work around of setting the overlay element to -1 on z-index to access the rest of the content.


Hi @kbowman, thank for the link to the site. While using z-index works, another easier method is to set the overlay to display none while working with other elements. Set display none in the Style panel for the overlay wrapper class.

Remember to set the wrapper back to the original display before publishing.

In the interaction that shows the overlay, make the first step change the display of the overlay back to display block (or whatever display style desired).

If questions, let me know :slight_smile:

AHHHHH! Why didn’t I think of that! That makes it so much easier!

Thanks so much for the help!

ps- sorry for so many exclamation points- but I am really happy about this


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