Cómo cambiar el z-index de manera imperativa con Javascript

Puedes cambiar el z-index de un elemento de manera imperativa con JavaScript, mediante la propiedad style.zIndex del elemento del DOM:

elemento.style.zIndex

Nota que no puedes usar z-index como propiedad de style por el guión. Por eso lo hemos cambiado con zIndex (en camelcase). Eso es así siempre que la propiedad css que quieras cambiar tiene un guión.

Ejemplo completo para cambiar el z-index con Javascript imperativamente

Primero necesitas seleccionar el elemento del DOM al que deseas aplicarle el cambio.

Lo puedes hacer de muchas maneras pero lo típico es utilizar el método document.getElementById() (o bien document.querySelector(), entre otros).

Una vez que tienes una referencia al elemento del DOM, puedes cambiar su propiedad zIndex a través de su propiedad de estilo. Lo puedes ver aquí:

// Seleccionando el elemento por su ID
var elemento = document.getElementById("miElemento");

// Cambiando el z-index del elemento
elemento.style.zIndex = "10";

En este ejemplo estamos acciendo por el id del elemento. El id se llama "miElemento" (atributo id del elemento HTML al que quieres cambiarle el z-index). El nuevo valor de z-index que estamos seteando es 10. Podría ser cualquier otro.

Recuerda que el z-index solo funciona en elementos cuya propiedad position es diferente de static. Si tienes alguna duda consulta la faq: Por qué z-index no funciona

Espero que te haya ayudado a cambiar el z-index de tu elemento con JavaScript.