Help me understand Position and Display (CSS) better

HTML-CSS
1

I’ve completed the HTML and CSS courses and I finished the tribute page. It looks ok and is responsive, but I have no Idea where to use absolute and where relative for position. I also don’t know what display does.

I usually try every option when using position until one of them does what I want.

I didn’t use the display property for the tribute page at all, but the test suite said that my image isn’t resizing relative to it’s container. The image was definitely responsive, but the test suite was not recognizing it so I was stuck for a couple of days trying new things and screaming inside. After looking through some tribute pages from other people, I added display: block; to the image and it passed the test (although the image moved a bit out of its place but I changed some code and it’s all good now), but I have no idea why it worked, why the image moved a bit, and what that little piece of code did.

I feel like I shouldn’t move on without understanding these basic concepts, so please help me understand them better.

2

There is a lot to cover, I think these may help:

If you feel that you want to have a more in-depth understanding, you can also read these:

Important things missing from the book chapters listed above are Flexbox and CSS Grid—but I think the freeCodeCamp lessons do cover the basics.

I hope that helps! :slight_smile:

2 Likes
3

Thank you so much. That’s exactly what I was searching for.