How do you adjust the z-index of the jQuery UI slider?

Question

I have a jQuery UI slider on my page and it's sticking up through a dropdown menu.

Is there a way to adjust its z-index or does it need to be the topmost element on the page for some reason?

Answer 1

EDIT: Sorry, I just realized my answer related to DatePickers and you asked about dropdown menus. I'm going to leave the answer, as it still should help you solve the problem. Just make sure your dropdown menu z-index is set higher than 2 so the slider handles don't show through.

---

It appears that something changed in the DatePicker code in a recent jQuery-UI release. I used to prevent the handles of sliders from showing through my DatePickers with the following CSS:

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

The handles of a Slider have a z-index of 2, so this would solve the problem. However, DatePicker now adds a z-index directly to the datepicker div element. This value overrides the .ui-datepicker value:

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

I attempted to set the z-index on my DatePicker's input to 4, but this didn't seem to work immediately. I'm sure if I spent more time on it, I could figure it out. Since I needed a quick solution, I just did this:

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

If that still doesn't work for you, try setting the value to 1000 or 10000 or something just to make sure you don't have other z-index's working against you.