Cómo traer una imagen adelante con CSS (En 6 Pasos)
Al diseñar páginas web, las imágenes de tu sitio pueden quedar solapadas por el texto y el contenido de la página. Afortunadamente, tienes la capacidad de traer una imagen hacia adelante utilizando hojas de estilo en cascada (CSS). Con CSS, utiliza el atributo z-index, similar a la capacidad "Traer al frente" de un programa de procesamiento de texto, para posicionar tus gráficos. Utiliza un editor de texto de tu computadora para aplicar el CSS que modifica la posición de tus imágenes.
Paso 1
Abre el editor de texto y luego el archivo del sitio web que contiene la imagen que deseas modificar.
Paso 2
Escribe el siguiente código CSS después de abrir la etiqueta
:Paso 3
Coloca el cursor entre los elementos de estilo y escribe un signo de número seguido de un término de tu elección (por ejemplo, "#forward"). Escribe un par de llaves después de ello, como se ve aquí para crear la regla de estilo para tu imagen:
forward { }
El signo de número crea un ID de CSS, que te permite diseñar una regla distinta para una imagen particular en tu página.
Paso 4
Escribe "position: absolute;" entre los corchetes para indicar al navegador que muestre tu imagen exactamente donde especifiques. Además, escribe "z-index:" e introduce un valor positivo en píxeles (px) de este modo:
forward {position: absolute; z-index: 5px;}
Z-index determina qué orden de aparece en la imagen, por lo tanto, un valor positivo más alto indica que la imagen está más hacia adelante.
Paso 5
Busca el código de imagen que deseas asignar a la regla de estilo CSS y escribe "id=#forward" dentro de la etiqueta. Por ejemplo:
Asegúrate de reemplazar "#forward" con el nombre de tu propia regla de CSS.
Paso 6
Guarda el archivo y observa una vista previa de tu trabajo en un navegador web para ver la nueva posición de la imagen.
