Cómo poner un elemento encima de todo en CSS (En 4 Pasos)
Cuando construyes páginas web complejas o multi-elemento -particularmente aquellos con posición absoluta de elementos de página, donde es imprescindible que el usuario vea exactamente la página como la has diseñado, a veces es necesario que te asegures de que un elemento se coloque sobre todos los demás. CSS incluye esta funcionalidad en forma de z-index, que es una manera de definir capas virtuales en la página con la prioridad de la capa más alta siempre recibiendo visibilidad.
Paso 1
Abre el código HTML de tu página web. Puedes utilizar tu editor HTML preferido si lo deseas, pero los cambios son relativamente sencillos por lo que también puedes hacer uso del Bloc de notas, TextEdit o algún otro editor de texto simple parecido.
Paso 2
Desplázate hasta el elemento de página que desees colocar sobre el resto de capas de la página. Asegúrate de que esté posicionado, es decir, que tenga el atributo CSS "position", por ejemplo en la etiqueta del elemento "style" debes asignar cualquiera de estos valores: "position: absolute", "position: fixed" o "position: relative".
Paso 3
Agrega el fragmento de código "z-index: 100"; para la etiqueta "style" del elemento de página. Por ejemplo, un elemento
Paso 4
Guarda el archivo, cierra y sal de éste. Abre el código HTML en un navegador web para comprobar que el elemento se muestra correctamente y que se encuentre colocado por encima de todos los demás elementos de la página.
