JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<header style="margin-bottom: 10px;">
        <button id="normalButton" onclick="normal();">Normal Flow</button>
        <button id="floatButton" onclick="float();">Float All Left</button>
        <button id="Button3" onclick="floatBlueRight();">Float Blue Right</button>&nbsp;+
        <button id="Button1" onclick="relative();">Relative Positioning Green</button>
        <button id="Button2" onclick="absolute();">Absolute Positioning Green</button>
    </header>

    <section id="container">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
        <div id="div6"></div>
        <div id="div7"></div>
        <div id="div8"></div>
        <div id="div9"></div>
    </section>

CSS

section {
            background: inherit;
            display: block;
            overflow: visible;
            width: 306px;
            height: 306px;
            border: 1px solid grey;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 0;
            padding: 0;
        }

            div:nth-of-type(3n+1) {
                background: red;
            }

            div:nth-of-type(3n+2) {
                background: green;
            }

            div:nth-of-type(3n) {
                background: blue;
            }

JavaScript

// querySelectorAll returns an object (not an array) with elements as properties
        var container = document.getElementById("container");
        var div = document.querySelectorAll("#container > div");
        for (var p in div) {
            div[p].textContent = div[p].id;
        };

        function normal() {
            container.style.overflow = "";
            for (var p in div) {
                if (div[p].toString().indexOf("HTMLDivElement") < 0) {
                    continue;
                }
                div[p].style.float = "";
                div[p].style.position = "";
                div[p].style.left = "";
            };
        }

        function floatBlueRight() {
            normal();
            var i = 0;
            for (var p in div) {
                if (i++ % 3 != 2 || div[p].toString().indexOf("HTMLDivElement") < 0) {
                    continue;
                }
                div[p].style.float = "right";
            };
        }

        function float() {
            normal();
            for (var p in div) {
                if (div[p].toString().indexOf("HTMLDivElement") < 0) {
                    continue;
                }
                div[p].style.float = "left";
            };
        }

        function relative() {
            var i = 1;
            for (p in div) {
                if (i++ % 3 != 2 || div[p].toString().indexOf("HTMLDivElement") < 0) {
                    continue;
                }
                div[p].style.position = "relative";
                div[p].style.top = "50px";
                div[p].style.left = "50px";
            };
        }

        function absolute() {
            var i = 1;
            for (var p in div) {
                if (i++ % 3 != 2 || div[p].toString().indexOf("HTMLDivElement") < 0) {
                    continue;
                }
                div[p].style.position = "absolute";
                div[p].style.top = String(i * 10 + 50) + "px";
               ...