How do I fix this 👇

Question

Pls am a beginner and I want to put an avatar div in the header div such day when I put a margin-top the header div would nt mov
https://code.sololearn.com/W0y2kwAEbiJs/?ref=app

Answer 1

It works like this:
Header's height = 70px
If you do top:50% at .avatar, the top of it will be at 70px, but since .avatar's height = 50px, it'll look like this
_________________
| |
| |
| _____ |
| / \ |
| | | |
``````````````````````````
As you can see , the top is at 50% of the header, but since we need the center of .avatar, which is at 50% of .avatar, we move the .avatar up with 50% of it's own height, so the transform:translateY(-50%) moves the .avatar up with 50% of it's own height

Answer 2

Check this one I think I did what you asked
https://code.sololearn.com/WnVP2vSpF110/?ref=app

Answer 3

add padding : 10px; to #header

Answer 4

Thank u all.... I appreciate this but can someone just please explain the position property and it's values

Answer 5

Prof roel I love that explanation but the transform part I don't really understand

Answer 6

Wow! Thanks

Answer 7

Facebook id please prof roel 😩

Answer 8

Thanks

Answer 9

Okay

Answer 10

lone beast gaming I don't have facebook, but you can message me through SoloLearn if you need help

Answer 11

Okay thanks

Answer 12

Prof roel can I please get an explanation on the css position property and it's values including the Css display property

Answer 13

lone beast gaming I think https://www.w3schools.com/ could help you better with that, since there are a fiew (static, initial, inherit, sticky) position values that I don't know and never use

Answer 14

For display:
- none: hides element
- block: shows element with like a <div>
- inline: shows element like a <span>
- inline-block: shows element like a <span> within a <div>

edit: Here is a code that might help you out
https://code.sololearn.com/W8WwssDhgVDp/?ref=app