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

Question

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

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

score 2 · Accepted Answer

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

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

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

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

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

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

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

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

score 1 · Accepted Answer

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

.ui-slider{
    z-index:1
}

score 1 · Accepted Answer

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

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

正如W3Schools所解释的：

“z-index 属性指定元素的堆栈顺序。

具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。”

3 回答 3