How to understand css positioning?

Question

Any tips ?

Answer 1

I used freecodecamp and codeacademy (just google them) in addition to sololearn. They have live previews of the exercises so you can see as you code...

In addition, you use codepen for practicing on your own.

If its how the css looks on different devices then use responsinator or resizer for resolution testing (for responsive design on mobile etc). Else google free resolution testers.

Answer 2

Just practice it until the concepts get into your head and you think of them naturally.

Answer 3

Yes, the greatest tip I ever learned about css positioning is the border property.

Lets say you have multiple DIVs with absolute and relative positions.

Give each DIV a css class.

Then each DIV will have the border property.

So

DIV 1 would have

Border:1px solid red;

DIV 2 would have

Border:1px solid blue;

And so on. Then you can see visually on the page how your DIVs are placed. You can now align them to your needs. When happy, you delete the css border property.

You can do this with adding border property to other HTML elements so you can visualize them on the page.

Answer 4

https://code.sololearn.com/WLJo9W7s8G8W/?ref=app

https://code.sololearn.com/W4dGFJx8wFW7/?ref=app

https://code.sololearn.com/WjK2oVDg89Il/?ref=app

https://code.sololearn.com/W3gS00IGw160/?ref=app

Answer 5

You should get a hang of it after repeated trial and error.

Answer 6

its a little bit complicated but I’m still practicing

Answer 7

Quite a few practice should get you the hang of it.
I still get confused on that topic too and I've been practicing too (Getting it committed to memory though). That should work for you too 👍👍

Answer 8

ohh thanks
its a very nice tip

Answer 9

I ALWAYS learn on several platforms, as sololearn is missing a few things... eg: it doesnt tell you that each browser has its own default css settings and that you should overide them before your css declarations in order to ensure your page appears the same on all platforms.

https://www.google.com/amp/s/www.webfx.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/amp/

Answer 10

thank you