DONT ADD ANYTHING HERE!


Static

Static

Static

Static

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: 6vw;
        left: 8vw;
    }

    .absolute {
        position: absolute;
        top: 2vw;
        left: 5vw;
    } 
    .fixed {
        position: fixed;
        top: 10vh;
        left: 0
    } 
    .sticky {
        position: sticky;
        top: 100px;
    } 
    .float-sticky {
        float: left;
        position: sticky;
        top: 100px;
    }

Code

HTML

    <div class="static-container">
        <div id="div-four"><br>Static</div>
        <div id="div-five"><br>Static</div>
        <div id="div-six"><br>Static</div>
        <div id="div-seven"><br>Static</div>
        <div id="div-eight"><br>Static</div>
        <p>Click the divs</p>
    </div>

CSS

    .relative {
        position: relative;
        top: 6vw;
        left: 8vw;
    }

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

    .fixed {
        position: fixed;
        top: 10vh;
        left: 0
    }

    .sticky {
        position: sticky;
        top: 100px;
    }

    .fixed {
        position: fixed;
        top: 10vh;
        left: 0
    }

    .float-sticky {
        float: left;
        position: sticky;
        top: 100px;
    }

    div.static-container {
        margin: 5px auto;
        width: 100%;

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

    div.static-container #div-four,
    div.static-container #div-five,
    div.static-container #div-six,
    div.static-container #div-seven,
    div.static-container #div-eight,
    div.static-container #div-nine {
        width: 8vw;
        height: 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;
    }

    #div-seven {
        background: cyan;
        color: white;
        text-decoration: underline dotted;
    }

    #div-eight {
        background: purple;
        color: white;
        text-decoration: underline dotted;
        height: 25vh;
    }

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', 'relative', "
" + 'Relative');
toggleClass('div-five', 'absolute', "
" + 'Absolute');
toggleClass('div-six', 'fixed', "
" + 'Fixed');
toggleClass('div-seven', 'sticky', "
" + 'Sticky');
toggleClass('div-eight', 'float-sticky', 'Float' + "
" + "Sticky");

References