Установка положения относительно динамически через Javascript

Question

Я пытаюсь создать волновой эффект, такой как Google, но не могу динамически установить положение элемента цели в «относительное», чтобы я мог использовать класс «волнового эффекта» для любого элемента.

Вот мой код

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();
}

Я действительно искал этот вопрос, если на него уже есть ответ, пожалуйста, поправьте меня. СПАСИБО :))