Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Reto: Posicionamiento Absoluto | Item Positioning
Advanced CSS Techniques

Reto: Posicionamiento AbsolutoReto: 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) usando posicionamiento absoluto.

Pasos a seguir:

  1. Aplicar posicionamiento absoluto al elemento hijo.
  2. Calcular los valores de las propiedades top y left para centrar el elemento hijo dentro del elemento padre. El elemento padre tiene una anchura y altura de 220px, mientras que el elemento hijo tiene una anchura y altura de 80px.
  3. Asegúrese de que un elemento tiene posicionamiento absoluto y el otro tiene posicionamiento relativo para establecer el contexto de posicionamiento correcto. De lo contrario, el posicionamiento absoluto será relativo al elemento body.
html

index.html

css

index.css

js

index.js

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

index.html

css

index.css

js

index.js

¿Todo estuvo claro?

Sección 2. Capítulo 5
course content

Contenido del Curso

Advanced CSS Techniques

1. Introducción

Visión general del cursoEnfoque del CursoTemas del CursoCómo tener éxito

2. Posicionamiento de Artículo

¿Qué es el Posicionamiento?Posicionamiento RelativoDesafío: Posicionamiento RelativoPosicionamiento AbsolutoReto: Posicionamiento AbsolutoPosicionamiento FijoReto: Posicionamiento FijoPosicionamiento FijoDesafío: Posicionamiento PegajosoOrden de ApilamientoDesafío: Orden de ApilamientoDesbordamiento de Contenido

3. Transiciones

¿Qué es Transición?Seleccionar Propiedad de TransiciónDuración de la TransiciónFunción de Tiempo de TransiciónRetardo de Tiempo de TransiciónCombinación de TransiciónDesafío: Añadir Transición

4. Animaciones

¿Qué es la Animación?Especificar la Duración de la AnimaciónControla la Cantidad y Dirección de Reproducción de la AnimaciónGestionar Estado de AnimaciónComposición de AnimaciónReto: Agregar Animación

5. Transformaciones

¿Qué es Transformación?EscaladoGiratorioReto: Agregar Escalado y RotaciónTraducirSesgoPerspectivaRetos: Añadir Traducción y Sesgo

6. Sitios web y aplicaciones adaptables/responsivos

¿Qué es el Diseño Adaptativo/Responsivo?@media QueryAdaptativo - Diseños responsivosInspeccionando la Página WebDesafío: Inspeccionar Diseño Adaptable/Responsivo

7. Preprocesadores

¿Qué es un Preprocesador?Sintaxis SassVariables de SassOperadores Numéricos de SassAnidamiento en SassDirectiva @extendEstructura de Carpeta-Archivo

Advanced CSS Techniques

Reto: Posicionamiento AbsolutoReto: 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) usando posicionamiento absoluto.

Pasos a seguir:

  1. Aplicar posicionamiento absoluto al elemento hijo.
  2. Calcular los valores de las propiedades top y left para centrar el elemento hijo dentro del elemento padre. El elemento padre tiene una anchura y altura de 220px, mientras que el elemento hijo tiene una anchura y altura de 80px.
  3. Asegúrese de que un elemento tiene posicionamiento absoluto y el otro tiene posicionamiento relativo para establecer el contexto de posicionamiento correcto. De lo contrario, el posicionamiento absoluto será relativo al elemento body.
html

index.html

css

index.css

js

index.js

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

index.html

css

index.css

js

index.js

¿Todo estuvo claro?

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