Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Challenge: Implement Absolute Positioning | Mastering CSS Positioning
Advanced CSS Techniques

book
Challenge: Implement Absolute Positioning

Task

Center the child element (div with the class name child) within the parent element (div with the class name parent) using absolute positioning.

Steps:

  1. Apply absolute positioning to the child element.

  2. Calculate the values for the top and left properties to center the child element within the parent element. The parent element has a width and height of 220px, while the child element has a width and height of 80px.

  3. Ensure that one element has absolute positioning, and the other has relative positioning to establish the correct positioning context. Otherwise, the absolute positioning will be relative to the body element.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="parent">
<p>parent</p>
<div class="child">
<p>child</p>
</div>
</div>
</body>
</html>

  1. To calculate the value for the top property, use the formula: (parentHeight - childHeight) / 2.

  2. To calculate the value for the left property, use the formula: (parentWidth - childWidth) / 2.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="parent">
<p>parent</p>
<div class="child">
<p>child</p>
</div>
</div>
</body>
</html>

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

Як ми можемо покращити це?

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

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

Запитати АІ

expand
ChatGPT

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

some-alt