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

Question

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

有没有办法调整其z-index，还是出于某种原因它是否需要成为页面中最顶层的元素？

Answer 1

编辑：对不起，我刚刚实现了与DatePickers相关的答案，您询问了下拉菜单。我要留下答案，因为它仍然可以帮助你解决问题。只需确保您的下拉菜单z-index设置为高于2，因此滑块手柄不会显示。

---

最近的jQuery-UI版本中的DatePicker代码似乎发生了变化。我曾经通过以下CSS阻止滑块手柄通过我的DatePickers显示：

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

Slider的句柄的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对您不利。

Answer 2

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

.ui-slider{
    z-index:1
}

Answer 3

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

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

正如W3Schools所述：

＆＃34; z-index属性指定元素的堆栈顺序。

堆叠顺序较大的元素始终位于堆栈顺序较低的元素前面。＆＃34;