Javascript Z指数不'；似乎什么都没变

我正在构建一些自定义下拉控件，而z索引无法正常工作

        // Add the empty class to the container div if no check boxes are checked.
        $('.qx-container').each(function ()
        {
            var container = $(this);
            if (!container.find('input[type="checkbox"]').is(':checked'))
            {
                container.find('.qx-content').text($('.qx-content').attr('empty-message'));
                container.find('.qx-content').addClass('qx-empty-content');
            }
            else
            {
                handleCheckBoxToggle(container.find('input[type="checkbox"]'));
            }
        });

        // Wire a mouse enter event to the container div. Turns the drop-down list's colors to gray if the slider isn't visible.
        $('.qx-container').mouseenter(function ()
        {
            var container = $(this);
            if (!container.find('.qx-slider').is(':visible'))
            {
                container.find('.qx-container-border-outer').addClass('qx-container-border-outer-hover');
                container.find('.qx-container-border-inner').addClass('qx-container-border-inner-hover');
                container.find('.qx-container-border-background').addClass('qx-container-border-background-hover');
            }

            container.data('hoverState', true);
        });

        // Wire a mouse leave event to the container div. Turns the drop-down list's colors to white if the slider isn't visible and
        // sets the container div's empty class if no check boxes are checked.
        $('.qx-container').mouseleave(function ()
        {
            var container = $(this);
            if (!container.find('.qx-slider').is(':visible'))
            {
                container.find('.qx-container-border-outer').removeClass('qx-container-border-outer-hover');
                container.find('.qx-container-border-inner').removeClass('qx-container-border-inner-hover');
                container.find('.qx-container-border-background').removeClass('qx-container-border-background-hover');
            }

            if (container.text() == '')
            {
                container.text($(this).attr('empty-message'));
                container.addClass('qx-empty-content');
            }

            container.data('hoverState', false);
        });

        // Wire a click event to the content div. Shows or hides the slider and changes the drop-down list's colors based on the slider's visibility.
        $('.qx-container-border-outer').click(function ()
        {
            var outer = $(this);
            var inner = $(this).find('.qx-container-border-inner');
            var background = $(this).find('.qx-container-border-background');
            var container = outer.closest('.qx-container');
            var slider = container.find('.qx-slider');
            var sliders = $('.qx-container').find('.qx-slider').not(slider);

            // Close any other open sliders.
            sliders.each(function ()
            {
                $(this).hide();

                var containerDiv = $(this).closest('.qx-container');
                var outerBorder = containerDiv.find('.qx-container-border-outer');
                var innerBorder = containerDiv.find('.qx-container-border-inner');
                var backgroundDiv = containerDiv.find('.qx-container-border-background');

                outerBorder.removeClass('qx-container-border-outer-selected');
                outerBorder.removeClass('qx-container-border-outer-hover');

                innerBorder.removeClass('qx-container-border-inner-selected');
                inner.removeClass('qx-container-border-inner-hover');

                backgroundDiv.removeClass('qx-container-border-background-selected');
                background.removeClass('qx-container-border-background-hover');
            });

            // Toggle the slider.
            slider.slideToggle(50, function ()
            {
                if (!container.data('hoverState'))
                {
                    outer.removeClass('qx-container-border-outer-hover');
                    inner.removeClass('qx-container-border-inner-hover');
                    background.removeClass('qx-container-border-background-hover');
                }

                if (slider.is(':visible'))
                {
                    outer.addClass('qx-container-border-outer-selected');
                    inner.addClass('qx-container-border-inner-selected');
                    background.addClass('qx-container-border-background-selected');
                }
                else
                {
                    outer.removeClass('qx-container-border-outer-selected');
                    inner.removeClass('qx-container-border-inner-selected');
                    background.removeClass('qx-container-border-background-selected');
                }
            });
        });

        // Wire a change event to the check boxes. Stores the user's selection in the content element & displays the text of which check box is checked.
        $('.qx-slider').find($('input[type="checkbox"]')).click(function (event)
        {
            event.stopPropagation();
            handleCheckBoxToggle($(this));
        });

        // Wire a mouse enter event to the slider row so the background color changes to gray.
        $('.qx-slider-row').mouseenter(function ()
        {
            $(this).find('td').addClass('qx-slider-cell-hover');
        });

        // Wire a mouse leave event to the slider row so the background color changes to white.
        $('.qx-slider-row').mouseleave(function ()
        {
            $(this).find('td').removeClass('qx-slider-cell-hover');
        });

        // Wire a mouse click event to the slider row to toggle the check box's checked attribute.
        $('.qx-slider-row').click(function ()
        {
            var checkBox = $(this).find('input[type="checkbox"]');
            checkBox.attr('checked', !checkBox.is(':checked'));
            handleCheckBoxToggle(checkBox);
        });

        // Handles the checked event for each check box.
        function handleCheckBoxToggle(checkBox)
        {
            // Reference to the containing content div.
            var content = checkBox.closest('.qx-container').find('.qx-content')

            // Holds the checked values (data is associated with the content div).
            var checkBoxData = content.data('checkBoxData');

            // Reference to all the check boxes in the slider.
            var checkBoxes = checkBox.closest('table').find('input[type="checkbox"]');

            // Create an array of check box values (associated with the content div) if it doesn't exist.
            if (checkBoxData == undefined)
            {
                checkBoxData = new Array();
                checkBoxes.each(function ()
                {
                    checkBoxData[$(this).attr('interest-level-description')] = 0;
                });
            }

            // Store the checked values of each check box.
            checkBoxes.each(function ()
            {
                checkBoxData[$(this).attr('interest-level-description')] = $(this).is(':checked') ? 1 : 0;
            });

            // Create a commo-delimited string from the checked values.
            content.data('checkBoxData', checkBoxData);
            var output = '';
            for (var property in checkBoxData)
            {
                if (checkBoxData[property] == 1)
                {
                    output += property + ", ";
                }
            }

            // Remove the trailing comma.
            if (output.match(",") != null)
            {
                output = output.substr(0, output.length - 2);
            }

            // Set the content text and class based on the checked values.
            if (output == '')
            {
                content.text(content.attr('empty-message'));
                content.addClass('qx-empty-content');
            }
            else
            {
                content.text(output);
                content.removeClass('qx-empty-content');
            }
        }

---

如果单击这些项目，您会注意到下拉菜单出现在后续的下拉菜单后面。我已经添加了z索引和相对于我能想到的每个元素的位置。

从下拉列表中删除z索引。还有，是什么让你认为在它们上设置一个0的z指数会让事情变得更好

---

为了让您了解如何使用z索引，切勿将z索引指定给某个元素，除非您希望它显示在另一个元素的顶部。最佳做法是在需要时才定义z索引（尤其是不指定值0）。在您的示例中，单击按钮（实际的下拉列表）后拥有的类的z索引应为1或更大，文档中的任何其他类都不应具有任何z索引定义。如果您有一个z索引为1的元素，然后将另一个元素放置在同一个物理点上，z索引为2——z索引较高的容器将与z索引较低的容器重叠