How to customize jQuery UI slider z-index?

Question

I have a jQuery UI slider on my page and it sticks out in the drop-down menu.

Is there a way to tune my z-index, or should it be the topmost element on the page for some reason?

Answer 1

EDIT: Sorry, I just figured out my answer related to DatePickers and you asked about the dropdown menus. I am going to leave an answer, as it should still help you solve the problem. Just make sure your z-index drop-down menu is set to more than 2 to prevent the sliders from showing.

---

, - DatePicker jQuery-UI. DatePickers CSS:

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

Slider z-index of 2, . , DatePicker z-index datepicker div. .ui-datepicker:

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

z-index DatePicker input 4, , , . , , . , :

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

, 1000 10000 - , , z-index, .

Answer 2

z- , . , div, , z-.

.ui-slider{
    z-index:1
}

Answer 3

z-index CSS:

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

As explained by W3Schools :

"The z-index property indicates the stack order of the element.

An element with a higher stack order is always before an element with a lower stack order. "