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）我不明白input.focus（）除了在jQuery(this).find('input:text').focus();上调用焦点之外还做什么 B）具有“.with-datepicker”类的日期选择器显示在页面上的其他元素后面，当我尝试单击日期选择器时，它会消失并且不会选择日期。

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

我还尝试在input.focus();

之后执行此操作

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

以下是该页面的外观链接：

Answer 1

确保 DatePicker 包含position: absolute;

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

您的问题在于找到正确的父级，并将正确的z-index提供给Active DatePicker。

Answer 2

将position:absolute提供给datepicker元素，将position:relative提供给datepicker元素的父元素

Answer 3

我用css解决了这个问题

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