日期选择器显示在下拉框后面答案

【问题标题】：date picker shows behind drop down box日期选择器显示在下拉框后面
【发布时间】：2013-05-23 05:29:06
【问题描述】：

我有一个 jquery datepicker 的常见问题，它显示在下拉框后面。我还尝试应用此处提供的解决方案：

Trouble with jQuery Dialog and Datepicker plugins

但它似乎无法在我的页面上运行。

我使用“jquery-ui.css”并在其中定义：

.ui-datepicker { 
width: 17em; 
padding: .2em .2em 0; 
z-index: 9999 !important; 
}

但日期选择器仍显示在下拉框后面。当我在 chrome 开发者工具中检查我的页面时，我得到了以下信息：

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-helper-clearfix
 ui-corner-all" style="position:absolute; top:160.875px; left 146px; z-index:1;">

我的问题是我怎么知道修改 z-index 的正确位置在哪里，我相信在 .ui-datepicker 中定义它是正确的，但我只是不知道为什么它不起作用。

我们将不胜感激。谢谢。

【问题讨论】：

你能提供任何 jsfiddle 或你测试的网站吗？
嗨，对不起，我对 jquery/javascript/css 真的很陌生，而 jsfiddle 对我来说也是新的，我会先尝试研究它并创建它。我无法提供该网站，因为它是公司内部网络应用程序。

标签： jquery css datepicker

【解决方案1】：

为小部件的顶部属性添加一些额外的像素。在小部件的 beforeshow 和 onclose 中调用该函数..将如下所示..

name: function(pxls){
            var widget = $(selector).datepicker("widget");

            widget.css("margin-top", function (i, v) {
                var top = parseFloat(v);
                return (top + pxls) + "px";
            });
        },

像下面这样调用上面的函数。

beforeShow: $.proxy(this.name, this, 4)
onClose: $.proxy(this.name, this, -4)

这里的 4 只是测试数据，你已经计算出这对你来说有多少。让我知道进展如何..

【讨论】：

【解决方案2】：

试试这个，

#ui-datepicker-div 
{
    z-index: 99999 !important; /* use #ui-datepicker-div in place of .ui-datepicker  */
}
.dropdown-box{
   z-index: 999 !important;      
}

【讨论】：

嗨@Rohan，感谢您的回复。我也尝试了您提供的代码，但我得到了相同的结果。
z-index 应该设置为重要而不是无能为力;)
@janell 试试上面的我已经做了修改
@abimelex 书写错误。 :)
发生这种情况。也许您还应该使用类 .ui-datepicker 而不是 ID？