Saltar al contenido principal
Codigo Heroe
Tarea anterior
Posicionamiento7/19
A la lista de tareas
  1. 1. Flujo del documento
  2. 2. Posicionamiento relativo
  3. 3. position: relative y la propiedad top
  4. 4. position: relative y la propiedad left
  5. 5. position: relative y la propiedad bottom
  6. 6. position: relative y la propiedad right
  7. 7. Posicionamiento relativo en la práctica
  8. 8. Posicionamiento absoluto
  9. 9. Posicionamiento absoluto y elementos en línea
  10. 10. position: absolute y la propiedad left
  11. 11. position: absolute y la propiedad top
  12. 12. position: absolute y la propiedad right
  13. 13. position: absolute y la propiedad bottom
  14. 14. Punto de referencia de las coordenadas
  15. 15. Práctica con coordenadas
  16. 16. Punto de referencia implícito
  17. 17. Posicionamiento absoluto en la práctica
  18. 18. Posicionamiento fijo
  19. 19. z-index: qué elemento queda encima
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Posicionamiento relativo en la práctica

En proyectos reales, el posicionamiento relativo puede servir para crear efectos decorativos, aunque tiene muchos otros usos.

En este ejercicio crearás un efecto de sombra para unas imágenes. Los estilos ya están preparados: solo faltan las propiedades de posicionamiento.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Posicionamiento relativo en la práctica</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="frame"> <img width="150" src="morozov.jpg" alt="Usuario 1"> </div> <div class="frame"> <img width="75" src="efimova.jpg" alt="Usuario 2"> </div> </body> </html>
CSS
.frame { display: inline-block; margin: 10px; background-color: #27ae60; border-radius: 6px; } .frame img { display: block; border-radius: 5px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0

    Asigna a las imágenes estas propiedades CSS:

    1. posicionamiento relativo,
    2. la propiedad top con el valor -5px,
    3. la propiedad left con el valor -5px.
    Codigo Heroe

    © 2023-2026, codigoheroe.com