So my question is: Why the “position: relative;” wont work here? i mean, why is it necessary to be absolute? Tried to put relative but it wont work. Sorry if this is too obvious,i can’t manage to know the answer
thanks guys!
Did you have a question here? If so, please be a little more descriptive. Because the CSS you pasted passes the test, so I’m not sure what you are asking.
Absolute positioning is used on .heart so that the heart will center both horizontally and vertically. You could use relative positioning here but then the heart will be at the top of the page.
As for the :before and :after positioning, this can actually be done using relative positioning but it is just slightly more work (requires more CSS properties) than using absolute positioning. If you want to challenge yourself then go ahead and try it. I would recommend you change the colors on those selectors though so it is easier to see what it going on. Actually, I take that back a little, you can definitely do this with using relative positioning for one of them but I’m not sure you’ll be able to do it using relative positioning for both of them.
Update: I take back my previous retraction. I was able to make the heart using relative positioning for both :after and :before.
Thank you, this is what i was asking for! Didn’t really got the difference between relative and absolute in this particular case. Can i see the code you did in the relative position one?
thanks!
Well then that would take the fun out of challenging yourself
Work at it for a while. Just start with one of them. Change the background color and position to relative and then go from there. If you really get stuck you can paste what you have in here (or message me directly).