DONT ADD ANYTHING HERE!

Static
Absolute
Static

Click the divs

Notes

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

Code

HTML

<div class="absolute-container">
    <div id="div-four">Static</div>
    <div id="div-five" class="absolute">Absolute</div>
    <div id="div-six">Static</div>
    <p>Click the divs</p>
</div>

CSS

.absolute {
    position: absolute;
    top: 2vw;
    left: 5vw;
}

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

    border: 2px solid orange;
    position: relative;
}

div.absolute-container #div-four,
div.absolute-container #div-five,
div.absolute-container #div-six {
    width: 8vw;
    line-height: 8vw;
    display: inline-block;
    text-align: center;
    margin: 1vw;
    font-size: 1.8vw;
}

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

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

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

.absolute-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-four', 'absolute', 'Absolute');
toggleClass('div-five', 'absolute', 'Absolute');
toggleClass('div-six', 'absolute', 'Absolute');

References