Changing Layer Values to ensure Pop Up appears as top-most layer

Ask the Community General Questions
1

I’m noticing that my pop up is set to a lower layer than some other elements, so that if you scroll on the page while the job pop up us open other elements, like text and other CTA buttons, will scroll over the pop up window. I’ve tried some CSS edits like: [class*=“Popup__”] {
z-index: 99999 !important;
}

But the issue continues. Any help would be appreciated.

The site I’m referring to: Representative Searches from Knight and Associates, a boutique retained search firm — Knight & Associates LLC

3

Hi there, @Aaron_Gray :waving_hand:

I am so sorry for this inconvenience!

I’ve passed it on to the devs and will let you know once it’s fixed :slightly_smiling_face:

4

Hi there, @Aaron_Gray :waving_hand:

Thank you for waiting!

We’ve fixed the issue with this code added to the Custom CSS field on the Appearance tab of your widget’s settings:

@external {
  .fe-block:has(:widget) {
    z-index: 9 !important;
  }
}

However, unfortunately, there is no way to hide a website header appearing on top of the popup when scrolling.

To achieve this, we’ll have to increase z-index of the container with the main content of your website, and this will make the header completely invisible.

Please let me know if this clarifies things or if you have any questions left :slightly_smiling_face:

5

Thank you @Max ! That worked. The header issue was solved by giving a larger padding at the top, so the pop up floats more in the center of the screen.

Thanks again!

6

It’s my pleasure!

Feel free to contact us again if any questions come up. We’ll be more than happy to help :wink: