¿Cómo se ajusta el índice Z del control deslizante jQuery UI?

Question

Tengo un control deslizante jQuery UI en mi página y se está perdiendo a través de un menú desplegable.

¿Hay alguna manera de ajustar su índice z o tiene que ser el elemento superior de la página por algún motivo?

Answer 1

Aunque no veo un z-index predeterminado en el control deslizante cuando lo incluyo. Compruebe si el div que está convirtiendo en un control deslizante tiene un z-index configurado.

.ui-slider{ 
    z-index:1 
} 

Answer 2

EDIT: Lo siento, me he dado cuenta de mi respuesta relacionada con datepickers y preguntado acerca de los menús desplegables. Voy a dejar la respuesta, ya que aún debería ayudarte a resolver el problema. Solo asegúrate de que el índice z del menú desplegable esté configurado a más de 2, por lo que los controles deslizantes no se muestran.

---

Parece que algo ha cambiado en el código DatePicker en una versión reciente de jQuery-UI. Me utilizado para prevenir las asas de los deslizadores de la muestra a través de mis datepickers con el siguiente CSS:

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

las asas de un deslizante tienen una z-index de 2, por lo que esto resolvería el problema. Sin embargo, DatePicker ahora agrega un z-index directamente al elemento datepicker div. Este valor prevalece sobre el valor .ui-datepicker:

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

que intentaron establecer el índice z en mi DatePicker de input a 4, pero esto no parece funcionar de inmediato. Estoy seguro de que si pasara más tiempo en eso, podría resolverlo. Ya que necesitaba una solución rápida, que acabo de hacer esto:

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

Si aún así no funciona para usted, intente establecer el valor a 1000 o 10000 o algo sólo para asegurarse de que no tiene otra z-index Está trabajando en contra de usted.

Answer 3

acaba de establecer el valor z-index para el manejo de la corredera en su archivo CSS:

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

Según lo explicado por W3Schools:

"La propiedad z-index especifica el orden de apilamiento de un elemento.

Un elemento con mayor orden de apilamiento está siempre delante de un elemento con un orden de apilamiento inferior ".