通过Javascript动态设置相对位置

Question

我正在尝试创建类似于Google的波动效果，但是我无法将目标的元素位置动态设置为“相对”，这样我就可以在任何元素上使用“ waves-effect”类。

这是我的代码

let __ = (arg) => document.querySelectorAll(arg),
    _ = (arg) => document.querySelector(arg);


Array.prototype.forEach.call( __(".waves-effect"), (elem) => {
    elem.addEventListener('mousedown', makeWave);
    elem.addEventListener('touchstart', makeWave);
});

function makeWave(event) {
    let wave = document.createElement("div");
    this.appendChild(wave);
    // Here i want to set position to relative
    // i have tried 'this.style.position = 'relative'' but it ain't working
    wave.classList.add("c-ripple");
    wave.setAttribute('id','i-ripple-effect');

    let max = Math.max( this.clientWidth, this.clientHeight );
    wave.style.height = wave.style.width = max + "px";

    wave.style.left = event.clientX - this.offsetLeft - max / 2 + "px";
    wave.style.top  = event.clientY - this.offsetTop - max / 2 + "px";

    wave.addEventListener("animationend", destroyRipple, false);
    wave.addEventListener("webkitAnimationEnd", destroyRipple, false);
    wave.addEventListener("oAnimationEnd", destroyRipple, false);
    wave.addEventListener("MSAnimationEnd", destroyRipple, false);
}

function destroyRipple() {
    _("#i-ripple-effect").remove();
}

我确实搜索了这个问题，如果已经回答了，请纠正我。 谢谢：）