z-index placing element below another one even though its higher

Question

i have this drop down im adding into a wordpress site using visual composer, and im having trouble getting it to stack on top of a parallax section that is just below it. Even though ive over-riden the parallaxes div to z-index:-1 !important; and set my drop down to have a z-index of 99;

Heres a link to the page where im having the problem (scroll down to the WHERE TO BUY secion, its the second set of drop downs)

http://tinyurl.com/q6oom83

And heres the code im using for the custom styled drop downs

        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

One solution is to set proper z-index to parent element of dropdown ie <div> element with id "buy" and also make it's overflow visible.

The dropdown was not visible because of overflow:hidden property of parent element.

CSS:

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

Answer 2

Check the page in your browser's dev tool.. the whole section is in an iframe - that is why the dropdown is cutt-off. I'm quite sure no element can overflow iframe...

And the second dropdown is not visible because the whole section (div with class="vc_row wpb_row vc_row-fluid vc_custom_1434584724192 full-width-section") that is sibling to the paralax section has set overflow='hidden'

you have to add:

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