Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Absolute Positioning | Item Positioning
Advanced CSS Techniques
course content

Course Content

Advanced CSS Techniques

Advanced CSS Techniques

1. Introduction
2. Item Positioning
3. Transitions
4. Animations
5. Transformations
6. Adaptive/responsive websites and apps
7. Preprocessors

bookChallenge: 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

css

index

js

index

copy
  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

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 5
some-alt