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:
- Apply
absolute
positioning to the child element. - Calculate the values for the
top
andleft
properties to center the child element within the parent element. The parent element has a width and height of220px
, while the child element has a width and height of80px
. - Ensure that one element has
absolute
positioning, and the other hasrelative
positioning to establish the correct positioning context. Otherwise, the absolute positioning will be relative to thebody
element.
index.html
index.css
- To calculate the value for the
top
property, use the formula:(parentHeight - childHeight) / 2
. - To calculate the value for the
left
property, use the formula:(parentWidth - childWidth) / 2
.
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 2. Hoofdstuk 5
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.04
Challenge: Implement Absolute Positioning
Veeg om het menu te tonen
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:
- Apply
absolute
positioning to the child element. - Calculate the values for the
top
andleft
properties to center the child element within the parent element. The parent element has a width and height of220px
, while the child element has a width and height of80px
. - Ensure that one element has
absolute
positioning, and the other hasrelative
positioning to establish the correct positioning context. Otherwise, the absolute positioning will be relative to thebody
element.
index.html
index.css
- To calculate the value for the
top
property, use the formula:(parentHeight - childHeight) / 2
. - To calculate the value for the
left
property, use the formula:(parentWidth - childWidth) / 2
.
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 2. Hoofdstuk 5