Positioning elements exactly one above the other

[Resa]

Hello everyone,

i hope somebody could help me. I am very desperate.

I want to Code a circle Animation (with pure css and html).

But i am not able to lay two Elements exactly one above the other.

I want 3 colored circles and if i hover over there is one White circle.

Please have a look on my Code!!
https://codepen.io/Res778/pen/wmZRJz

I am very grateful for help!!

Cheers,
Theresa

[Mamun]

Add these things with your existing codes. It would solve the problem for the time being.

.chart {
position: relative;
z-index:-100; /* Remove this line from your code */
}

.chart svg {
position: absolute;
left: -12px;
top: -16px;
}

If the problem persist, let me know.

[JeroenR]

You can try something like this: https://codepen.io/anon/pen/GxaEjB
Won’t give you a real good result in every browser though (i.e. Firefox). It is hard for browsers to draw rounded borders exactly on top of each other.

What I did is set the chart divs to relative positioned and the svg inside of them absolute positioned.
Then you can position the SVG exactly on top of the chart. Only problem then, is that the style change depended on hovering the chart div. That is why I wrapped them both in another container chart-container. That container can be ‘hovered’ all the time then.

Maybe you can try solving this in SVG completely for a better result.

[Author]

Posts