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

Question

我使用 visual composer 将此下拉菜单添加到 wordpress 网站中，但我无法将其堆叠在其正下方的视差部分之上。即使我将视差 div 覆盖为 z-index:-1 ！重要；并将我的下拉菜单设置为 z-index 为 99；

这是我遇到问题的页面 link（向下滚动到购买地点部分，这是第二组下拉菜单）

http://tinyurl.com/q6oom83

这是我用于自定义样式下拉菜单的代码

        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

检查浏览器开发工具中的页面。整个部分都在 iframe 中 - 这就是下拉列表被截断的原因。我很确定没有元素可以溢出 iframe...

并且第二个下拉菜单不可见，因为与视差部分同级的整个部分（div 和 class="vc_row wpb_row vc_row-fluid vc_custom_1434584724192 full-width-section"）设置了 overflow='hidden'

你必须添加：

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

Answer 2

一个解决方案是为下拉列表的父元素设置适当的 z-index，即

id 为 "buy" 的元素，并使其溢出可见。

由于父元素 overflow:hidden 属性，下拉菜单不可见。

CSS:

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

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

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

javascript

css

jquery

z-index