Cómo traer una imagen adelante con CSS

Introduce CSS para llevar una imagen hacia adelante.
Por brandy alexander

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 <head>:

<style type="text/css">

</style>


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: <img src="http://www.site.com/image.gif" id="#forward" />

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.