jQuery DatePicker显示在其他常规页面元素的后面

Question

我遇到了由其他人实现的日期选择器的麻烦。我试图在我的网站上实施代码，但无法正常工作。以下是Javascript DatePicker

// init datepicker
function initDatepicker(){
    jQuery('.with-datepicker').each(function(){
        var hold = jQuery(this);
        var input = hold.find('input:text');
        var opener = hold.find('.btn');
        input.datepicker({
            showOtherMonths: true
        })
        opener.bind('click', function(e){
            input.focus();
            e.preventDefault();
        })
    })
}

所以我的问题是2折。
A）除了将焦点放在jQuery(this).find('input:text').focus();
B 之外，我不知道input.focus（）到底在做什么。B）类“ .with-datepicker”的datepicker出现在页面上其他元素的后面，当我尝试单击时在日期选择器上，它消失了，并且没有选择日期。

要给您提供更多信息，我将其与联系表7一起使用，该联系表具有一个文本框，您可以单击该文本框来激活日期选择器。该部分似乎正常。日期选择器从字面上显示在显示“选择日期”的输入框的正下方。问题在于datepicker类位于其他元素（如单选按钮）的后面。

我也尝试过 input.focus();

$(this).parent().css('position', 'relative');
$(this).parent().css('z-index', 3000);

以下是页面外观的链接：

Answer 1

我只用css解决了这个问题

.ui-datepicker { z-index: 10000 !important; }

Answer 2

确保您的DatePicker有position: absolute;

并且包装器应该有position: relative;，它的其他子元素不应该有relative定位。

您的问题是找到正确的父级，并z-index为 Active DatePicker 提供正确的值。