Results Summary Component

Community feedback

• 

  Javier-cnc•170

  @Javier-cncPosted about 1 year ago

  I think you need to explain in more detail what is the issue you are facing, to be able to help you...

  0

  ---

  

  Duyen Nguyen•100

  @kyduyennguyenPosted about 1 year ago

  @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.

  0

  

  Javier-cnc•170

  @Javier-cncPosted about 1 year ago

  @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.

  Marked as helpful

  0

  

  Duyen Nguyen•100

  @kyduyennguyenPosted about 1 year ago

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

  0