Saltar al contenido principal
Codigo Heroe
Tarea anterior
Posicionamiento9/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 absoluto y elementos en línea

El posicionamiento absoluto cambia el comportamiento tanto de los elementos de bloque —por ejemplo, su ancho predeterminado— como de los elementos en línea.

Un elemento en línea con posicionamiento absoluto se comporta igual que un elemento de bloque con ese posicionamiento. Por ejemplo, puedes definir sus dimensiones con width y height.

Podemos pensar en los elementos con posicionamiento absoluto como un tipo más. Cualquier elemento, ya sea de bloque, en línea o de bloque en línea, pasa a comportarse así al asignarle position: absolute;.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Posicionamiento absoluto y elementos en línea</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block">Bloque 1</div> <span class="inline-absolute">Elemento en línea</span> <div class="block">Bloque 3</div> </body> </html>
CSS
body { padding: 20px; } .block { margin-bottom: 20px; padding: 10px; text-align: center; color: white; background-color: #3a78a1; } .inline-absolute { color: white; background-color: rgba(255, 0, 0, 0.5); }

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

    Al elemento con la clase inline-absolute, asígnale:

    1. posicionamiento absoluto,
    2. un ancho de 200px,
    3. una altura de 100px.
    Codigo Heroe

    © 2023-2026, codigoheroe.com