Z-Index Issue

Hoping someone can help me with a CSS fix. I have a dropdown that displays behind the body content (see attached).

If you enter "9" in the second input field, you'll see a dropdown of suggestions, but that dropdown is displaying behind the content underneath it. I've tried changing the z-index but it isn't working. Any help would be appreciated.

Here's the link to view:

E-DubFrontend Web Developer & Graphic DesignerAsked:
Who is Participating?
Flabio GatesCommented:
if I remove the "no-overflow-x" CLASS from your SECTION tag
<section class="green_bg no-overflow-x">

Open in new window

the drop-down does not go underneath.
RobOwner (Aidellio)Commented:

Get rid of the overflow on the section element and it works:

line 504 of custom.css
.no-overflow-x {
      /* overflow-x: hidden; */
RobOwner (Aidellio)Commented:
Ha! beat me to it Flabio :)
E-DubFrontend Web Developer & Graphic DesignerAuthor Commented:
Thank you so much!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.