My svg circle not overlapping

Question

My two circles are not overlapping, why? How to overlap them?

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

Answer 1

Rishi , BTW if you want to place first object in top of the second you could also use CSS property z-index

Here's how to do so:

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

Answer 2

Here is not using css position
like Aleksei Radchenkov , I do a little move to make it clear.

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

Answer 3

You could do that with position:absolute;
applied to svg
(I've done that in css)
(I also moved second circle a little so you could see its overlapping)

Here is the code:

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

Answer 4

Rishi, position absolute places element relative to parent, when position relative places an element relative to itself.

https://leannezhang.medium.com/difference-between-css-position-absolute-versus-relative-35f064384c6#:~:text=position%3A%20relative%20places%20an%20element,changing%20the%20layout%20around%20it.

In your case it helps as it makes both svg elements start from the same place.

Answer 5

Oh tnx I got it =)

Answer 6

Aleksei Radchenkov what is position absolute and relative? How it works?