Desafí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:
- Aplicar posicionamiento
absoluteal elemento hijo. - Calcular los valores para las propiedades
topyleftpara centrar el elemento hijo dentro del elemento padre. El elemento padre tiene un ancho y alto de220px, mientras que el elemento hijo tiene un ancho y alto de80px. - Asegurarse de que un elemento tenga posicionamiento
absolutey el otro tenga posicionamientorelativepara establecer el contexto de posicionamiento correcto. De lo contrario, el posicionamiento absoluto será relativo al elementobody.
index.html
index.css
- Para calcular el valor de la propiedad
top, utilizar la fórmula:(parentHeight - childHeight) / 2. - Para calcular el valor de la propiedad
left, utilizar la fórmula:(parentWidth - childWidth) / 2.
index.html
index.css
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 2. Capítulo 5
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04
Desafí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:
- Aplicar posicionamiento
absoluteal elemento hijo. - Calcular los valores para las propiedades
topyleftpara centrar el elemento hijo dentro del elemento padre. El elemento padre tiene un ancho y alto de220px, mientras que el elemento hijo tiene un ancho y alto de80px. - Asegurarse de que un elemento tenga posicionamiento
absolutey el otro tenga posicionamientorelativepara establecer el contexto de posicionamiento correcto. De lo contrario, el posicionamiento absoluto será relativo al elementobody.
index.html
index.css
- Para calcular el valor de la propiedad
top, utilizar la fórmula:(parentHeight - childHeight) / 2. - Para calcular el valor de la propiedad
left, utilizar la fórmula:(parentWidth - childWidth) / 2.
index.html
index.css
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 2. Capítulo 5