我有一个幻灯片 div，我在该 div 上方有一个日期选择器字段。
当我点击日期选择器字段时，日期选择器面板显示在幻灯片 div 后面。
我把脚本写成：
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js
所以我无法在 CSS 中更改 datepicker 的 z-index。脚本生成的日期选择器的 z-index 是 1，而我的幻灯片 div（也通过 googleajaxapi 调用）z-index 是 5。所以我想我必须将日期选择器的 z-index 增加到大于 5。所以有吗有什么办法增加吗？
有人可以帮助我吗？
【问题讨论】：
标签： jquery jquery-plugins uidatepicker
在“输入”文本元素中添加以下样式：position: relative; z-index: 100000;。
datepicker div 从输入中获取 z-index，但这仅适用于相对位置。
使用这种方式，您不必从 jQuery UI 修改任何 javascript。
【讨论】：
position : relative 是不可接受的，在我的情况下不起作用。下面的解决方案工作正常。
只需在您的 css 中使用 '.ui-datepicker{ z-index: 9999 !important;}' 在这里 9999 可以替换为您希望您的日期选择器可用的任何层值。既不评论任何代码，也不在输入元素上添加“position:relative;”css。因为增加输入元素的 z-index 会对所有输入类型的按钮产生影响，在某些情况下可能不需要。
【讨论】：
datepicker 而不是ui-datepicker
为我工作
.hasDatepicker {
position: relative;
z-index: 9999;
}
【讨论】：
基于 marksyzm 的回答，这对我有用：
$('input').datepicker({
beforeShow:function(input) {
$(input).css({
"position": "relative",
"z-index": 999999
});
}
});
【讨论】：
我有一个使用日期选择器的对话框。它总是被隐藏起来。当我调整 z-index 时，下部表单上的字段总是出现在对话框中。
我使用了我看到的解决方案的组合来解决问题。
$('.ui-datepicker', $form).datepicker({
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-M-dd",
beforeShow: function (input) {
$(input).css({
"position": "relative",
"z-index": 999999
});
},
onClose: function () { $('.ui-datepicker').css({ 'z-index': 0 } ); }
});
before show 确保选中时 datepicker 始终位于顶部，但 onClose 确保该字段的 z-index 被重置，以便它不会与稍后使用不同 datepicker 打开的任何对话框重叠。
【讨论】：
$(this) 而不是$('.ui-datepicker')。因此，它会将z-index:0 设置为“此输入”，而不是所有带有 ui-datepicker 类的输入。
添加到贾斯汀的回答中，如果您担心标记不整洁，或者您不希望在 CSS 中硬编码此值，您可以在显示之前设置输入。像这样的：
$('input').datepicker({
beforeShow:function(input){
$(input).dialog("widget").css({
"position": "relative",
"z-index": 20
});
}
});
请注意，您不能省略 "position": "relative" 规则，因为插件要么在内联样式中查找两个规则或样式表，但不能同时查找。
dialog("widget") 是实际弹出的日期选择器。
【讨论】：
我通过点击解决了这个问题：
var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
$('.datepicker').css("z-index", "999999999");
}).data('datepicker');
【讨论】：
我有一个页面，其中日期选择器位于 datatables.net 表格工具按钮的顶部。 数据表按钮的 z-index 高于单个日期选择器日期按钮。 感谢 Ronye 的回答，我能够通过使用 position: relative; 来解决这个问题。和 z 指数：10000。 谢谢！
【讨论】：
当我错过主题时，这发生在我身上。确保主题存在，或者重新下载主题，然后将其重新上传到您的服务器。
【讨论】：
这解决了我的问题：
$( document ).ready(function() {
$('#datepickerid').datepicker({
zIndexOffset: 1040 #or any number you want
});
});
【讨论】：
事实上，您可以有效地添加您的 css .ui-datepicker{ z-index: 9999 !important;}，但您可以修改 jquery-ui.css 或 jquery-ui.min.css 并在 ui-datepicker 类的末尾添加 z-index: 9999 !important;。这两件事都对我有用（你只需要一个;-)）
【讨论】：
我不得不
.datepicker.dropdown-menu {
position: relative;
z-index: 9999 !important;
}
【讨论】：
我也遇到了这个问题，因为 datepicker 使用输入的 z-index，所以我添加了以下 css
#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
z-index:inherit;
}
只需使用适用于您的规则，通过父 ID、类，或者在我的情况下是引导对话框，使用它们的输入组和表单控件。
【讨论】：