"Despite being higher in position, the z-index is causing the element to be placed below

I am currently facing an issue with a dropdown menu that I am trying to add to a WordPress site using Visual Composer. The problem arises when I attempt to place the dropdown on top of a parallax section below it. Despite setting the z-index of the parallax div to -1 !important and giving the dropdown a z-index of 99, they do not stack properly.

You can view the page where the issue occurs by scrolling down to the "WHERE TO BUY" section, which features the second set of dropdowns.

Click here to access the page

Below is the code snippet I am currently using for the custom styled dropdown menus:

        function DropDown(el) {
            this.dd = el;
            this.placeholder = this.dd.children('span');
            this.opts = this.dd.find('ul.dropdown > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;
                obj.dd.on('click', function(event){
                    $(this).toggleClass('active');
                    return false;
                });

                obj.opts.on('click',function(){                     
                    var ddid2 = $(this).attr('id');
                    $('.box').hide();
                    $('.drop-down-show-hide').hide()    
                    $('.'+ddid2).show();

                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var dd = new DropDown( $('#dd') );
            var dd = new DropDown( $('#dd2') );

            $(document).click(function() {
                // all dropdowns
                $('.wrapper-dropdown-1').removeClass('active');
            });

        });

Answer №1

A simple fix is to adjust the z-index of the parent container of the dropdown, specifically the <div> element with the ID "purchase," and ensure that its overflow property is set to visible.

The reason why the dropdown wasn't showing up was due to the parent element having an overflow:hidden property.

Here's the CSS code:

#purchase {
  z-index: 99;
  overflow: visible;
}

Answer №2

Take a look at your browser's developer tools to inspect the page. The entire section is embedded in an iframe, which explains why the dropdown menu is being cut off. It seems unlikely that any element can overflow from an iframe...

Additionally, the second dropdown menu is not visible due to the overflow='hidden' property set on the sibling section (a div with class="vc_row wpb_row vc_row-fluid vc_custom_1434584724192 full-width-section") adjacent to the parallax section.

To fix this issue, you will need to add the following CSS:

overflow: visible;
position: relative;
z-index: 1;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the differences between client-side and server-side data manipulation

Recently, I discovered how to access local variables from Express in client-side JavaScript: Check out this helpful thread on StackOverflow However, this discovery has brought up a new challenge for me... Now I am unsure about which data manipulation tas ...

Update WooCommerce Mini-cart with ajax refresh

I'm having an issue with my custom plugin where everything is working properly, except for the fact that the mini cart is not updating after adding items. I have tried various methods to trigger a refresh, but so far nothing has worked. Below is a sni ...

Prevent the overlap of text by controlling the positioning of a div element

Below is a simplified version of the layout I'm working with: <div style="position: relative; width:600px;"> <p>Content with unknown length, but very lengthy</p> <div>Content with unknown height</div&g ...

Developing custom events in an NPM package

Developing a basic npm package with signalr integration has been my recent project. Here's how it works: First, the user installs the package Then, the package establishes a connection using signalr At a certain point, the server triggers a function ...

What is the best way to simulate a CSS import for a jest/enzyme test?

I am facing an issue with mocking an imported CSS file in my jest/enzyme test: Header.test.js import React from 'react' import { shallow } from 'enzyme' import { Header } from './Header' jest.mock('semantic-ui-css/sema ...

Updating Microsoft panels with the latest jQuery datepicker functionality

My jquery ui datepicker textbox has stopped working within an update panel. I am unable to click on it to load the datepicker. Here is my code: // Datepicker settings $('body').on('load', '#dpWorkWeek', function() { $(thi ...

Is AngularJS the right choice for creating components?

Currently, I am developing a PHP web application with approximately 200 unique views. Most of these views simply display tables or forms. However, there are about 10 pages where users could benefit from dynamic/async components to prevent constant page re ...

Is there a way to incorporate an animated element within the track of my circular progress bar?

My circular progress bar features two paths, with one path increasing in length as data is received, eventually turning the entire circle red. Here is the SVG HTML code: <path d="M 50,50 m 0,-47 a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,-94" stroke="#A9B0B7" ...

The spreading of personalized events

I am expecting my CustomEvent to be propagated from the document to all the DOM elements. However, for some unknown reason, it is not happening. Can you point out what mistake I might be making? <html> <script> function onLoad() { var myDi ...

Creating PDF files from elements using Puppeteer JS

In my quest to master the usage of Puppeteer within a Vue.js application, I am facing a challenge. I am able to create a PDF based on the entire page successfully, but I am struggling to generate a PDF for a specific element on the page. Is there a method ...

Enhanced auto-zoom feature with orientation change for iOS 7

My web page was functioning perfectly until the release of iOS 7 by Apple today, causing the layout to break when the screen orientation is changed. When focusing on a text area and rotating the screen to landscape view, the entire page zooms in. However, ...

Initiate animation on command with either Jquery or JavaScript

I have a special notification display box that showcases errors on my website .flash { height: 75px; position: fixed; top: 20px; right: 20px; z-index: 10; background-color: #ffffff; box-shadow: 0 0 30px 2px #dddddd; -webkit-animation: flas ...

How to make Vuetify grid columns wrap and fill the full height

I am facing an issue where the component created using v-card in a grid system does not fill the full height. I tried using d-flex but it did not work as expected. The middle column with a white v-card should occupy the entire column height but it is gett ...

``Maybe there is a way to fix the issue of jQuery not functioning properly

I am currently working on integrating jquery with Reactjs to add a class on click event. The functionality works fine when the page is refreshed, but it stops working if I navigate to the page after clicking on any menu item without refreshing. How can I ...

What is the best way to switch between two icons using boot-strap and jQuery without the use of buttons?

Is there a way to make it so that clicking on the heart icon hides it and shows the filled heart icon instead using jQuery? I am struggling to figure out how to reference the other icon in my function. This is just a rough idea of what I want to achieve. ...

What is preventing me from translating JS Canvas Image?

I've been struggling with using ctx.translate() to translate images on a canvas. No matter what I do, it just won't work. I've spent a good amount of time trying to troubleshoot the issue. Here's the snippet of code I'm working wit ...

adjusting the size of the sidebar at the top to ensure that it does not overlap the top menu

I have a sidebar on my page that opens vertically when I click a button. The sidebar covers the company logo and name, so I want to make it smaller. Here is the code for the sidebar: <body> <nav class="navbar navbar-dark bg-dark" ...

Display a single specific outcome within a React component's list

import {useState, useEffect } from 'react' import axios from 'axios' const Singlecountry = ({searchedCountries, setWeather, weather}) => { const weatherName = searchedCountries[0].capital console.log(weather) useEffect(() =&g ...

When you hover over an image, both the image's opacity and the color of the title beneath it change. However, if the title expands to two lines, it messes up

I am currently working on a project where I have an image and a title displayed below the image. My goal is to change the color of the text when hovering over the image, as well as adjust the opacity of the image. Additionally, when hovering over the title ...

Automatically integrating Nivo Lightbox into your website

I incorporated Nivo Lightbox into my website, seamlessly integrating all images with the plugin using the following code: <div class="portfolio-item"> <div class="portfolio-thumb "> <a class="lightbox" data-lightbox-type="ajax" title="Strat ...