jquery-ui datepicker更改z-index
这个问题是相当直接的，虽然我很难搞清楚如何解决这个问题。
我正在使用jQuery-ui datepicker以及一个自定义的“ios样式开/关切换”。 此切换使用一些绝对定位的元素，目前显示在我的dateselect器上。
看到下面的6月7日的丑陋的圈子…
这样做的肮脏的方式（至lessimo）是在我的样式表中写一个样式，但我宁愿使用一些JavaScript时，select器启动完成这一点。
我已经试过了
$('.date_field').datepicker(); $('.date_field').datepicker("widget").css({"z-index":100}); 和
$('.date_field').datepicker({ beforeShow: function(input, inst) { inst.dpDiv.css({"z-index":100}); } });
但似乎z-index会在每次启动dateselect器时被覆盖。
任何帮助表示赞赏！
问题中的JS代码不起作用，因为每次调用时，jQuery都会重置dateselect器小部件的style属性。
一个简单的方法来覆盖它的style的z-index是一个!important CSS规则，如另一个答案中已经提到的。 还有一个答案提出了设置position: relative; 和z-index在input元素本身将被自动复制到Datepicker小部件。
但是，根据要求，如果出于任何原因，您确实需要dynamic设置它，为您的页面添加更多不必要的代码和处理，您可以试试这个：
$('.date_field').datepicker({ //comment the beforeShow handler if you want to see the ugly overlay beforeShow: function() { setTimeout(function(){ $('.ui-datepicker').css('z-index', 99999999999999); }, 0); } });
小提琴
我创build了一个延迟的函数对象来设置小部件的z-index ，当它被jQuery UI重置后，每次调用它。 它应该满足您的需求。
CSS hack是不那么丑陋海事组织，我保留在我的CSS jQuery的UI调整（这正好在我的网页上的IE6调整正好）的空间。
有一个更优雅的方式来做到这一点。 添加这个CSS：
.date_field {position: relative; z-index:100;}
jQuery将设置日历的z-index为101（比相应的元素多一个）。 position字段必须是absolute ， relative或fixed 。 jQuerysearch第一个元素的父级，这是绝对/相对/固定，并采取其“ z-index
您需要使用!important子句来强制使用CSS的内联z-index值。
.ui-datepicker{z-index: 99 !important};
datepicker现在将popup的z-index设置为比其相关字段多一个，以便将其保留在该字段的前面，即使该字段本身位于popup对话框中。 默认情况下，z-index是0，所以datepicker以1结束。有没有这种情况下，不正确地显示datepicker？ JQuery论坛post
要得到一个100的z-index。你需要一个带有z-index:99;的inputz-index:99; 而JQueryUI会将dateselect器更新为z-index:100
<input style="z-index:99;"> or <input class="high-z-index"> and css .high-z-index { z-index: 99; } .high-z-index { z-index: 99; }
你也可以指定z-indexinheritance，它应该从你的对话框inheritance，并使jQueryUI正确地检测z-index。
<input style="z-index:inherit;"> or <input class="inhert-z-index"> and css .inherit-z-index { z-index: inherit; } .inherit-z-index { z-index: inherit; }
这对我来说，当我试图使用datepicker与引导模式结合使用：
$('input[id^="txtDate"]').datepicker(); $('input[id^="txtDate"]').on('focus', function (e) { e.preventDefault(); $(this).datepicker('show'); $(this).datepicker('widget').css('z-index', 1051); });
当然，改变select符以适应您自己的需要。 我将“z-index”设置为1051，因为引导模式的z-index被设置为1050。
最好的自然的方法是简单地把dateselect器元素放在一个“平台”上，该平台具有“相对”的位置，并且比在控制之上出现的元素具有更高的“Z指数”。
