@JEWebDev
Posted
@luisgustavogorniak
Hello Luis!
Congrats on finishing the challenge, it looks amazing and really close to the design files.
Regarding your questions about the position let me explain to you why it happend:
When you use position: absolute you take that element outside the normal flow of the page. In this case the img element. You gave the img element the following styles:
position: absolute;
top: 0rem;
left: 0;
width: 100%;
height: auto;
This made the Img element display on top of the page.
And the next sibling element the content is behind the img element because "now it is the first element on the page". you can read more about absolute positioning in this freecodecamp article about it
To fix this remove the position: absolute and the top: 0 and left: 0 styles from the img element. (Don't forget to remove the padding from the content element too or it will be pushed down)
You don't need to absolute position it because you are already using flexbox on your main container.
`
