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
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
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?
Awesome!
Completion rate improved to 2.04
Challenge: Implement Absolute Positioning
Swipe to show menu
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
Thanks for your feedback!