Question

我有这个下拉，我使用视觉作曲家添加到wordpress网站，我很难让它堆叠在它下面的视差部分之上。即使我过度使用视差div到z-index：-1！important;并将我的下拉设置为z-index为99;

这是一个指向我遇到问题的页面的链接（向下滚动到WHERE TO BUY secion，它是第二组下拉菜单）

以下是用于自定义样式下拉列表的代码

        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

一种解决方案是将正确的z-index设置为下拉列表的父元素，即＆lt; div＆gt; id为“buy”的元素，也使其溢出可见。

由于溢出：父元素的隐藏属性，下拉列表不可见。

CSS：

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

Answer 2

在浏览器的开发工具中查看该页面..整个部分位于iframe中 - 这就是下拉菜单停止的原因。我非常确定没有元素可以溢出iframe ...

并且第二个下拉列表不可见，因为整个部分（div为class =＆＃34; vc_row wpb_row vc_row-fluid vc_custom_1434584724192 full-width-section＆＃34;）是paralax部分的兄弟，设置了overflow =＆＃39;隐藏＆＃39;

你必须添加：

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

z-index将元素置于另一个元素下方，即使它更高

2 个答案: