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();
上调用 focus 之外到底在做什么B) 类为“.with-datepicker”的日期选择器显示在页面上其他元素的后面，当我尝试单击日期选择器时它消失并且没有选择日期。

要提供给您的更多信息是，我将其与 Contact Form 7 一起使用，它有一个文本框，您可以单击它来激活日期选择器。那部分似乎工作正常。日期选择器直接显示在显示“选择日期”的输入框下方。问题是日期选择器类位于其他元素(例如单选按钮)之后。

我也在 input.focus();

之后尝试这样做

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

下面是它在页面上的样子的链接:

Answer 1

我用 css 解决了这个问题

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