> Nota
> 
> Cada desafío en este curso incluye un ejemplo de código compuesto por los archivos `index.html` y `index.css`. Como el curso se centra en el aprendizaje de CSS, se recomienda resolver los desafíos en el archivo `index.css`. Una vez completado el desafío, haz clic en el botón "Run Code" para ver la página en vivo y asegurarte de que el desafío se resolvió correctamente.
>
> Además, cada desafío proporciona los botones "Hint" y "Solution". Al hacer clic en el botón "Hint" se mostrarán pistas relevantes para la tarea actual, mientras que el botón "Solution" revelará el ejemplo de código con la aplicación correcta de CSS.

## Tarea
1. Añadir posicionamiento `relative` al segundo elemento con el nombre de clase `item`.
2. Mover el elemento `30px` hacia abajo y `50px` hacia la izquierda.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgoKICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9Iml0ZW0iPjE8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iaXRlbSI+MjwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJpdGVtIj4zPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBiZWxvdyB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCi5pdGVtOm50aC1jaGlsZCgyKSB7CiAgcG9zaXRpb246IF9fXzsKICB0b3A6IF9fXzsKICBsZWZ0OiBfX187Cn0KLyogLS0tLS0tLS0tLS0tLS0tIE1ha2UgY2hhbmdlcyBhYm92ZSB0aGlzIGxpbmUgLS0tLS0tLS0tLS0tLS0tICovCgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIG1heC13aWR0aDogMzQwcHg7CiAgYm9yZGVyOiAycHggc29saWQgI2ExYTFhMTsKICBwYWRkaW5nOiAxMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47Cn0KCi5pdGVtIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwoKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6IHdoaXRlOwp9CgouaXRlbTpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtY29sb3I6ICM1MDUxNGY7Cn0KCi5pdGVtOm50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzI0N2JhMDsKfQoKLml0ZW06bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjI1ZjVjOwp9

1. Desplazar hacia abajo estableciendo un valor positivo para la propiedad `top`.
2. Desplazar hacia la izquierda estableciendo un valor negativo para la propiedad `left`.

Lml0ZW06bnRoLWNoaWxkKDIpIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgdG9wOiAzMHB4OwogIGxlZnQ6IC01MHB4Owp9CgovKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KCiogewogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCi5jb250YWluZXIgewogIG1hcmdpbjogMCBhdXRvOwogIG1heC13aWR0aDogMzQwcHg7CiAgYm9yZGVyOiAycHggc29saWQgI2ExYTFhMTsKICBwYWRkaW5nOiAxMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47Cn0KCi5pdGVtIHsKICB3aWR0aDogMTAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwoKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgY29sb3I6IHdoaXRlOwp9CgouaXRlbTpudGgtY2hpbGQoMSkgewogIGJhY2tncm91bmQtY29sb3I6ICM1MDUxNGY7Cn0KCi5pdGVtOm50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzI0N2JhMDsKfQoKLml0ZW06bnRoLWNoaWxkKDMpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjI1ZjVjOwp9

Mejora tus habilidades de estilizado dominando técnicas avanzadas de CSS para el diseño web moderno. Posiciona y gestiona elementos con precisión utilizando estrategias avanzadas de posicionamiento. Crea transiciones suaves y animaciones atractivas para mejorar la experiencia del usuario. Transforma y manipula elementos para lograr efectos visuales dinámicos. Construye diseños responsivos que se adapten a diferentes dispositivos y aprende a optimizar tu flujo de trabajo con preprocesadores CSS como Sass.

Investigue qué pueden esperar los estudiantes de este curso avanzado de estilos en HTML y CSS. ¿Qué conocimientos previos se requieren antes de comenzar el curso? ¿Qué temas se abordarán en el mismo?

Posicionamiento y gestión de elementos en páginas web. Estudio de las diferentes propiedades de posicionamiento, uso del orden de apilamiento para controlar la visibilidad de elementos superpuestos y manejo del desbordamiento de contenido.

Investigue el potencial de las transiciones y aprenda cómo mejorar la experiencia del usuario. Descubra cómo animar propiedades de manera suave y gradual, creando transiciones de estado sin interrupciones.

Aprenda sobre la propiedad animation y cómo puede utilizarse para crear diseños dinámicos y atractivos. Descubra cómo crear animaciones complejas utilizando keyframes y cómo controlar la animación.

Explora la propiedad de transformación, que permite modificar la apariencia y posición de los elementos en una página web. Aprende a escalar, rotar, sesgar y trasladar elementos en dos y tres dimensiones. Combina múltiples transformaciones para crear efectos más complejos.

Los principios y técnicas utilizados en el diseño adaptativo/responsivo buscan que los sitios web y aplicaciones sean accesibles y visualmente atractivos en diferentes dispositivos, tamaños de pantalla y orientaciones.

Aprende sobre los preprocesadores en CSS y cómo pueden ayudar a escribir un código más eficiente y mantenible. Comprende cómo utilizar preprocesadores para simplificar el flujo de trabajo y generar un código CSS más limpio.

Desafío: Aplicar Posicionamiento Relativo

Tarea

Awesome!

Desafío: Aplicar Posicionamiento Relativo

Tarea