Cómo poner un elemento encima de todo en CSS

Escrito por robert allen | Traducido por luis alberto fuentes schwab
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
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. (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.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 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.

  2. 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".

  3. 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.

  4. 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.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles