javascript - 如何使 jQuery datePicker 弹出窗口不透明并始终在前台？

Question

我正在类加罗尔附近的野生动物度假村网站上工作 http://www.innthewild.com几个小时以来一直在尝试解决 jQuery 上的一个简单问题。

我在 Google 和 StackOverflow 上都进行了研究，但由于我的问题有点独特，所以我一直未能找到解决方案。

基本上，我有一个 jimage-slider 小部件和一个 datepicker 小部件，它们都来自 jQuery，作为我主页设计的一部分。现在的问题是，当我单击输入框以激活 datePicker 时，出现的 datePicker 弹出窗口不断被 jimage-slider 小部件的标题更新推到后台。

此外，这个问题似乎特定于浏览器，自 IE10 以来，datePicker 位于前台，而在 Chrome 中，datePicker 不断被推到后台。所以在 IE10 上页面看起来很好，标题更新在后台，我可以轻松选择日期。而在 Chrome 中，事情变得一团糟。我猜它与浏览器如何实现其渲染算法有关 - 但我正在寻找我可以在 jimage-slider 或 datePicker 上进行的一些 CSS 属性更改以获得我需要的行为。本质上要么确保 datePicker 总是在前台，要么 jimage-slider 总是在后台......

源码详情，请访问以上链接，通过浏览器查看源码...

非常感谢任何指点，这是我第一次使用 jQuery，所以我并不完全了解如何去做。

Answer 1

添加到您的 CSS:

#sliderFrame { z-index: -50 }

在 Chrome 上测试。

jquery UI 数据选择器在内联 CSS 中的 z-index 为 1，因此我们选择小于此值的 z-index 以确保它在堆叠顺序中显示在其下方。