Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære 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>

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 5

Spør AI

expand
ChatGPT

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

We use cookies to make your experience better!
some-alt