My svg circle not overlapping | Sololearn: Learn to code for FREE!
+ 3

My svg circle not overlapping

My two circles are not overlapping, why? How to overlap them? https://code.sololearn.com/WTH6194oNSA3/?ref=app

4th Oct 2021, 2:28 AM
Rishi
Rishi - avatar
6 Réponses
+ 4
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
4th Oct 2021, 3:15 AM
Aleksei Radchenkov
Aleksei Radchenkov - avatar
+ 4
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
4th Oct 2021, 3:15 AM
Myo Thuzar
Myo Thuzar - avatar
+ 2
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
4th Oct 2021, 2:57 AM
Aleksei Radchenkov
Aleksei Radchenkov - avatar
+ 2
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.
4th Oct 2021, 3:06 AM
Aleksei Radchenkov
Aleksei Radchenkov - avatar
+ 2
Oh tnx I got it =)
4th Oct 2021, 6:14 AM
Rishi
Rishi - avatar
0
Aleksei Radchenkov what is position absolute and relative? How it works?
4th Oct 2021, 3:02 AM
Rishi
Rishi - avatar