Results Summary Component

@Javier-cnc

• My issue is about the position property of CSS. When I use position properties to set the layout for my page, I don't know how it interacts with the web page. For example, with this challenge, I used position property for footer, as follows: .attribution { font-size: 11px; text-align: center; position: absolute; width: 100%; height: 2.5rem; } We usually use position: relative for container-main and position: absolute for the footer (or other elements), but if I use position: relative for container-main, the footer will be on top, although I have set bottom and top for footer. That's why I'm confused when using the position property.

@kyduyennguyen

When an element's position property is set to absolute, the element will be positioned relative to the nearest positioned ancestor (which will be any element with the position property set to any of these values: relative , absolute , fixed , or sticky), but to see the effects you need explicity set some of the properties (left, right, top or bottom) of the child element because their default value is 'auto'.

In your case, you placed the <footer class="attribution"> element inside a <div class="container-main">, where you make the div element positioned by applying 'absolute' to its position and the footer is going to be placed relative to it as soon you set some of the properties (top, bottom, left or right) if you want to place the footer element always below the div element you can use a different approach than set its position to absolute, or you can use a negative 'bottom' value.

Also, absolute positioned elements are removed from the normal flow, so if you use that approach you may face the risk of overlap elements.

Ah...I got it. I'm going to try to edit my code again. So many thanks, @Javier-cnc. ^^