mfa dt bootcamp web class css positioning example 4: absolute

<!DOCTYPE html>

<html>
<head>
    <meta  charset="utf-8">
    <title>Example E</title>
    <style>
        h1, h3, div {
          z-index: 10;
          text-align: center;
        }
        .box {
            z-index: -9;
            position: absolute;
            width: 200px;
            height: 200px;
            line-height: 150px;
            /*margin: 10px;*/
        }
        #box_1 { 
            top: 0;
            left: 0;
            background: #ee3e64;
        }
        #box_2 { 
            top: 0;
            right: 0;
            background: #44accf;
        }
        #box_3 { 
            bottom: 0;
            left: 0;
            background: #b7d84b;
        }
        #box_4 { 
            bottom: 0;
            right: 0;
            background: #ebde52;
        }
    </style>
</head>
<body>
    <h1>Four boxes positioned absolute</h1>
    <h3>The offset properties are used to put them in the corners</h3>
    <h3>For absolutely positioned elements, the top, right, bottom, and left properties <br> specify offsets from the edge of the element's containing block (what the element is positioned relative to). <br> The margin of the element is then positioned inside these offsets.</h3>
    <h3>Try resizing the browser window :)</h3>
    <div id="box_1" class="box"><p>top: 0, left: 0</p></div>
    <div id="box_2" class="box"><p>top: 0, right: 0</p></div>
    <div id="box_3" class="box"><p>bottom: 0, left: 0</p></div>
    <div id="box_4" class="box"><p>bottom: 0, right: 0</p></div>
</body>
</html>