Cómo poner un elemento encima de todo en CSS

Por robert allen
Un elemento posicionado de la página puede utilizar un "z-index" para cambiar su orden de presentación.
Comstock/Comstock/Getty Images

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

con z-index aplicada puede tener un aspecto como este:

Si no tienes una etiqueta de estilo, agrega una, con "z-index: 100" como el único argumento. Esto colocará el elemento sobre el resto de la página y los elementos con z-index por debajo de 100; por defecto, la página tiene z-índex igual a 0.

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.