DONT ADD ANYTHING HERE!

Static
Relative
Static

Click the divs

Notes

Clicking on a div in the above diagram causes the following CSS class to be added/removed: 
    .relative {
    position: relative;
    top: 3vw;
    left: 5vw;
    }

Code

HTML

<div class="rel-container">
    <div id="div-one">Static</div>
    <div id="div-two" class="relative">Relative</div>
    <div id="div-three">Static</div>
    <p>Click the divs</p>
</div>

CSS

.relative {
    position: relative;
    top: 3vw;
    left: 5vw;
}

div.rel-container {
    margin: 5px auto;
    width: 60%;
}

div.rel-container {
    border: 2px solid orange;
}

div.rel-container #div-one,
div.rel-container #div-two,
div.rel-container #div-three {
    width: 8vw;
    line-height: 8vw;
    display: inline-block;
    text-align: center;
    margin: 1vw;
    font-size: 1.8vw;
}

#div-one {
    background: red;
    text-decoration: underline dotted;
}

#div-two {
    background: lime;
    text-decoration: underline dotted;
}

#div-three {
    background: blue;
    color: white;
    text-decoration: underline dotted;
}

.rel-container>p {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: 1em;
    color: var(--primary-green);
}

JavaScript

function toggleClass(id, toggleClass, toggleMsg) {
    if (document.getElementById(id)) {
        document.getElementById(id).addEventListener('click', 
          function () {
            if (this.classList.contains(toggleClass)) {
                this.classList.remove(toggleClass);
                this.innerHTML = "Static";

            } else {
                this.classList.add(toggleClass);
                this.innerHTML = toggleMsg;
            }
        });
    }
}

toggleClass('div-two', 'relative', 'Relative');
toggleClass('div-one', 'relative', 'Relative');
toggleClass('div-three', 'relative', 'Relative');

References