Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Implementar Posicionamiento Absoluto | Dominio del Posicionamiento en CSS
Técnicas Avanzadas de CSS

bookDesafío: Implementar Posicionamiento Absoluto

Tarea

Centrar el elemento hijo (div con el nombre de clase child) dentro del elemento padre (div con el nombre de clase parent) utilizando posicionamiento absoluto.

Pasos:

  1. Aplicar posicionamiento absolute al elemento hijo.
  2. Calcular los valores para las propiedades top y left para centrar el elemento hijo dentro del elemento padre. El elemento padre tiene un ancho y alto de 220px, mientras que el elemento hijo tiene un ancho y alto de 80px.
  3. Asegurarse de que un elemento tenga posicionamiento absolute y el otro tenga posicionamiento relative para establecer el contexto de posicionamiento correcto. De lo contrario, el posicionamiento absoluto será relativo al elemento body.
index.html

index.html

index.css

index.css

copy
  1. Para calcular el valor de la propiedad top, utilizar la fórmula: (parentHeight - childHeight) / 2.
  2. Para calcular el valor de la propiedad left, utilizar la fórmula: (parentWidth - childWidth) / 2.
index.html

index.html

index.css

index.css

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.04

bookDesafío: Implementar Posicionamiento Absoluto

Desliza para mostrar el menú

Tarea

Centrar el elemento hijo (div con el nombre de clase child) dentro del elemento padre (div con el nombre de clase parent) utilizando posicionamiento absoluto.

Pasos:

  1. Aplicar posicionamiento absolute al elemento hijo.
  2. Calcular los valores para las propiedades top y left para centrar el elemento hijo dentro del elemento padre. El elemento padre tiene un ancho y alto de 220px, mientras que el elemento hijo tiene un ancho y alto de 80px.
  3. Asegurarse de que un elemento tenga posicionamiento absolute y el otro tenga posicionamiento relative para establecer el contexto de posicionamiento correcto. De lo contrario, el posicionamiento absoluto será relativo al elemento body.
index.html

index.html

index.css

index.css

copy
  1. Para calcular el valor de la propiedad top, utilizar la fórmula: (parentHeight - childHeight) / 2.
  2. Para calcular el valor de la propiedad left, utilizar la fórmula: (parentWidth - childWidth) / 2.
index.html

index.html

index.css

index.css

copy

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 2. Capítulo 5
some-alt