z-index放置元素位於另一個元素之下，即使該元素較高

Question

我使用Visual Composer將這個下拉菜單添加到wordpress網站中，並且無法將其堆疊在其下方的視差部分上方。 即使我將視差div改寫為z-index：-1！important; 並將我的下拉菜單設置為z-index為99；

這是我有問題的頁面的鏈接（向下滾動到WHERE TO BUY secion，這是第二組下拉菜單）

http://tinyurl.com/q6oom83

這是用於自定義樣式下拉菜單的代碼im

        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

一種解決方案是為下拉菜單的父元素（即ID為“ buy”的<div>元素）設置適當的z-index，並使其可見。

由於父元素的overflow：hidden屬性，因此下拉列表不可見。

CSS：

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

Answer 2

在瀏覽器的開發工具中檢查頁面。整個部分都位於iframe中-這就是下拉菜單被刪節的原因。 我很確定沒有元素會溢出iframe ...

而且第二個下拉列表不可見，因為與paralax部分同級的整個部分（具有class =“ vc_row wpb_row vc_row-fluid vc_custom_1434584724192 full-width-section”的div）已將overflow ='hidden'設置為

您必須添加：

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