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

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

本文关键字：元素 Z-index 另一个      更新时间：2023-09-26

我使用visual composer将这个下拉菜单添加到wordpress网站中，并且我很难将它堆叠在视差部分的顶部，就在它下面。尽管我已经覆盖了视差div到z-index:-1 !并设置下拉列表的z-index为99;

这是我遇到问题的页面的链接(向下滚动到where to BUY部分，这是第二组下拉菜单)

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');
            });
        });

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

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

下拉菜单不可见，因为父元素的overflow:hidden属性。

CSS: 

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

在浏览器的开发工具中检查页面。整个部分在iframe中-这就是为什么下拉框被切断的原因。我很确定没有元素可以溢出iframe…

第二个下拉菜单不可见，因为与视差部分同级的整个部分(div with class="vc_row wpb_row vc_row-fluid vc_custom_1434584724192 full- widthsection ")设置了overflow='hidden'

你必须加上:

overflow:visible;
position:relative;
z-index:1;
相关文章：