Cómo poner un elemento encima de todo en CSS

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

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 <div> con z-index aplicada puede tener un aspecto como este:

<div class="subcontainer" style="position: absolute; left: 20px; top: 20px; z-index: 100;">

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.