Question

早上好，我已经在这个问题上绞尽脑汁了。当您点击进入texbox时，我会弹出一个日历弹出窗口。这个日历工作正常，除了它显示在菜单栏后面的事实。

我一直试图通过使用z-index来显示它，但我没有运气。有没有办法让所有的JavaScript都显示在最上面？非常感谢任何帮助。

以下是代码：

 $(document).ready(function() {
$( "#datepicker" ).datepicker({ minDate: -0, maxDate: "2Y+1M+7D",
            changeMonth: true, changeYear: true,
            numberOfMonths:2,
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            dateFormat:"mm/dd/yy",
            showAnim:"drop" });//fold, slide, blind, bounce, slideDown, show, fadeIn, clip.
  });

还有大量的CSS涉及我无法在这里发布。提前谢谢你：）

Answer 1

您可以尝试使用CSS方式：

#datepicker{position:relative;z-index:100;}

或者你可以尝试jQuery方式：

$('.ui-datepicker').css('z-index', 99999999999999);

JSFiddle

Answer 2

我无法分辨你所分享的代码存在哪些问题，但我之前已经发生过这种情况。问题通常出在HTML布局中。确保日期选择器不在另一个卡在相对位置的元素内。您可以尝试将其移出任何父元素。

这不起作用

<body> <nav style="position:fixed;">  </nav> <div style="position:relative;"> <div id="datepicker"></div> </div> </body>

但这将 <body> <nav style="position:fixed;">  </nav> <div style="position:relative;"> </div> <div id="datepicker"></div> </body>

很抱歉，如果这没有帮助。我只是根据之前发生在我身上的事情来预感。

Answer 3

Ben Sewards通过他的链接给了我解决方案。我只需要在实际的texbox中添加一些CSS。谢谢大家。

在菜单栏前移动日历

3 个答案: