如何调整 jQuery UI 滑块的 z-index？答案

【问题标题】：How do you adjust the z-index of the jQuery UI slider?如何调整 jQuery UI 滑块的 z-index？
【发布时间】：2011-05-27 18:28:04
【问题描述】：

我的页面上有一个 jQuery UI 滑块，它通过下拉菜单弹出。

有没有办法调整它的 z-index 或者由于某种原因它需要成为页面上最顶层的元素？

【问题讨论】：

【解决方案1】：

只需在 CSS 文件中为滑块的句柄设置 z-index 值即可：

.ui-slider .ui-slider-handle { z-index: 1; }

正如W3Schools所解释的：

"z-index 属性指定元素的堆叠顺序。

堆栈顺序较大的元素总是在堆栈顺序较低的元素之前。”

【讨论】：

【解决方案2】：

编辑：对不起，我刚刚意识到我的回答与 DatePickers 相关，您询问了下拉菜单。我将留下答案，因为它仍然可以帮助您解决问题。只需确保您的下拉菜单 z-index 设置为高于 2，这样滑块句柄就不会显示出来。

在最近的 jQuery-UI 版本中，DatePicker 代码似乎发生了一些变化。我曾经使用以下 CSS 防止滑块的句柄通过我的 DatePickers 显示：

.ui-datepicker {
  z-index: 4;
}

滑块的句柄的z-index 为 2，所以这可以解决问题。但是，DatePicker 现在将 z-index 直接添加到 datepicker div 元素。此值会覆盖 .ui-datepicker 值：

inst.dpDiv.zIndex($(input).zIndex()+1);

我尝试将我的 DatePicker 的 input 上的 z-index 设置为 4，但这似乎并没有立即起作用。我敢肯定，如果我花更多的时间在上面，我可以弄清楚。因为我需要一个快速的解决方案，所以我这样做了：

.ui-datepicker {
  z-index: 4 !important;
}

如果这仍然不适合您，请尝试将值设置为 1000 或 10000 或其他值，以确保您没有其他 z-index 对您不利。

【讨论】：

【解决方案3】：

虽然我在包含滑块时没有看到默认的 z-index 设置。检查您要变成滑块的 div 是否设置了 z-index。

.ui-slider{
    z-index:1
}

【讨论】：