Jquery 日期选择器 z-index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7033420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery date picker z-index issue
提问by rubyist
I have a slideshow div, and I have a datepicker field above that div.
我有一个幻灯片 div，并且在该 div 上方有一个 datepicker 字段。
When I click in the datepicker field, the datepicker panel show behind slideshow div.
当我单击日期选择器字段时，日期选择器面板显示在幻灯片 div 后面。
And I have put the script as:
我已经把脚本作为：
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js
So I cannot change the z-index of datepicker in CSS. The z-index of datepicker which the script is generating is 1 and my slideshow div(also calling thru googleajaxapi) z-index is 5. So I guess I have to increase the z-index of date picker greater than 5. So is there any way to increase it ?
所以我无法在 CSS 中更改 datepicker 的 z-index。脚本生成的日期选择器的 z-index 为 1，我的幻灯片 div（也通过 googleajaxapi 调用）z-index 为 5。所以我想我必须将日期选择器的 z-index 增加到大于 5。所以有有什么办法可以增加吗？
Someone can help me?
有人可以帮助我吗？
回答by Ronye Vernaes
Put the following style at the 'input' text element: position: relative; z-index: 100000;.
将以下样式放在“输入”文本元素中：position: relative; z-index: 100000;.
The datepicker div takes the z-index from the input, but this works only if the position is relative.
datepicker div 从输入中获取 z-index，但这仅在位置是相对的情况下才有效。
Using this way you don't have to modify any javascript from jQuery UI.
使用这种方式，您不必从 jQuery UI 修改任何 javascript。
回答by Aakash Sahai
simply in your css use '.ui-datepicker{ z-index: 9999 !important;}' Here 9999 can be replaced to whatever layer value you want your datepicker available. Neither any code is to be commented nor adding 'position:relative;' css on input elements. Because increasing the z-index of input elements will have effect on all input type buttons, which may not be needed for some cases.
只需在您的 css 中使用 ' .ui-datepicker{ z-index: 9999 !important;}' 这里 9999 可以替换为您希望日期选择器可用的任何图层值。任何代码都不会被注释，也不会position:relative;在输入元素上添加 ' ' css。因为增加 input 元素的 z-index 将对所有输入类型按钮都有影响，在某些情况下可能不需要。
回答by Bashmakov Evgeniy
worked for me
为我工作
.hasDatepicker {
position: relative;
z-index: 9999;
}
回答by Lucas
Based in marksyzm answer, this worked for me:
基于 marksyzm 答案，这对我有用：
$('input').datepicker({
beforeShow:function(input) {
$(input).css({
"position": "relative",
"z-index": 999999
});
}
});
回答by marksyzm
Adding to Justin's answer, if you're worried about untidy markup or you don't want this value hard coded in CSS you can set the input before it is shown. Something like this:
添加到贾斯汀的答案中，如果您担心标记不整洁，或者您不想在 CSS 中硬编码此值，则可以在显示之前设置输入。像这样的东西：
$('input').datepicker({
beforeShow:function(input){
$(input).dialog("widget").css({
"position": "relative",
"z-index": 20
});
}
});
Note that you cannot omit the "position": "relative"rule, as the plugin either looks in the inline style for both rules or the stylesheet, but not both.
请注意，您不能省略该"position": "relative"规则，因为插件要么在两个规则或样式表中都以内联样式查找，但不能同时在两者中查找。
The dialog("widget")is the actual datepicker that pops up.
这dialog("widget")是实际弹出的日期选择器。
回答by Harry Binnendyk
I have a dialog box that uses the datepicker on it. It was always hidden. When I adjusted the z-index, the field on the lower form always showed up on the dialog.
我有一个使用日期选择器的对话框。它一直是隐藏的。当我调整 z-index 时，下方表单上的字段总是显示在对话框中。
I used a combination of solutions that I saw to resolve the issue.
我使用了我看到的解决方案的组合来解决这个问题。
$('.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 } ); }
});
The before show ensures that datepicker always is on top when selected, but the onClose ensures that the z-index of the field gets reset so that it doesn't overlap on any dialogs opened later with a different datepicker.
before show 确保选择时日期选择器始终位于顶部，但 onClose 确保字段的 z-index 被重置，以便它不会与稍后使用不同日期选择器打开的任何对话框重叠。
回答by Waqleh
I had this issue i solved by using on click:
我通过单击解决了这个问题：
var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
$('.datepicker').css("z-index", "999999999");
}).data('datepicker');
回答by Slawa
回答by TMNetworks
I have a page where the datepicker was on top of a datatables.net tabletools button. The datatables buttons had a higher z-index than the individual datepicker date buttons. Thanks to Ronye's answer I was able to resolve this problem by using position: relative; and z-index: 10000. Thanks!
我有一个页面，其中日期选择器位于 datatables.net tabletools 按钮之上。数据表按钮比单个日期选择器日期按钮具有更高的 z-index。感谢 Ronye 的回答，我能够通过使用 position:relative; 来解决这个问题。和 z-index：10000。谢谢！
回答by TMNetworks
This happened to me when I was missing the theme. Make sure the theme exists, or perhaps redownoad the theme, and reupload it to your server.
当我错过主题时，这发生在我身上。确保主题存在，或者重新下载主题，然后将其重新上传到您的服务器。
