'How to calculate mouse click position in an element inside a fixed container?

I'm trying to reproduce this ripple effect but when added to elements which are inside a fixed container, the ripple span is added too far down https://jsfiddle.net/kmruc2os/1/

If you remove the position fixed from the div surrounding the button, the effect works. The could that should change is this i think but I have no idea how:

    let x = e.clientX - e.target.offsetLeft;
    let y = e.clientY - e.target.offsetTop;

    // Position the span element
    ripple.style.left = `${x}px`;
    ripple.style.top = `${y}px`;

Credits to https://www.geeksforgeeks.org/how-to-create-a-ripple-effect-on-click-the-button/

javascripthtmlcssmaterial-ui


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions