Position relative or absolute

Tell us what’s happening:

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!

Your code so far


<style>
.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
}

.heart::after {
  background-color: pink;
  content: "";
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px; 
  top: 0px;
  left: 25px;
}

.heart::before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  position: absolute;
  width: 50px;
  height: 50px;
  top: -25px;
  left: 0px;
}
</style>
<div class="heart"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.141 Safari/537.36.

Challenge: Create a More Complex Shape Using CSS and HTML

Link to the challenge:

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.

Hi @Aiden22!

I have edited your post to move your question up in the
Tell us what’s happening section.

Happy coding!

Here is a good article explaining the difference:

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.

1 Like

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 :slight_smile:

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).

1 Like

Ok i will try!
wish me luck :smiley: