Вивчайте Завдання: Реалізація Абсолютного Позиціонування

Завдання

Вирівняти дочірній елемент (div з класом child) по центру батьківського елемента (div з класом parent) за допомогою абсолютного позиціонування.

Кроки:

Застосувати позиціонування absolute до дочірнього елемента.
Обчислити значення властивостей top та left, щоб розмістити дочірній елемент по центру батьківського елемента. Батьківський елемент має ширину та висоту 220px, а дочірній елемент — ширину та висоту 80px.
Переконатися, що один з елементів має позиціонування absolute, а інший — relative, щоб встановити правильний контекст позиціонування. Інакше абсолютне позиціонування буде відносно елемента body.

index.html

index.css

Для обчислення значення властивості top використовуйте формулу: (parentHeight - childHeight) / 2.
Для обчислення значення властивості left використовуйте формулу: (parentWidth - childWidth) / 2.

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 5

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me the CSS code to center the child element using absolute positioning?

What should the HTML structure look like for the parent and child divs?

Can you explain why one element needs relative positioning and the other absolute?

Свайпніть щоб показати меню

Завдання

Кроки:

Застосувати позиціонування absolute до дочірнього елемента.
Обчислити значення властивостей top та left, щоб розмістити дочірній елемент по центру батьківського елемента. Батьківський елемент має ширину та висоту 220px, а дочірній елемент — ширину та висоту 80px.
Переконатися, що один з елементів має позиціонування absolute, а інший — relative, щоб встановити правильний контекст позиціонування. Інакше абсолютне позиціонування буде відносно елемента body.

index.html

index.css

Для обчислення значення властивості top використовуйте формулу: (parentHeight - childHeight) / 2.
Для обчислення значення властивості left використовуйте формулу: (parentWidth - childWidth) / 2.

index.html

index.css

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 5