D3 Examples - mfa dt bootcamp web class css positioning example 2: relative

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- Credit:These positioning examples are credited to Noah Stokes' blog post on A List Apart, CSS positioning 101: https://alistapart.com/article/css-positioning-101
 -->
<html>
<head>
    <meta charset="utf-8">
    <title>Boxes positioned relative</title>
    <style>
        .box { 
            position: relative; /* positioning our boxes relative */
            width: 200px;
            height: 200px;
        }
        #box_1 { 
            background: #ee3e64;
        }
        #box_2 {
            background: #44accf;
            left: 200px; /* use the left offest property to shift the box over*/
        }
        #box_3 {
            background: #b7d84b;
        }
    </style>
</head>
<body>
    <h1>3 boxes positioned relative</h1>
    <h3>All boxes fall within the normal flow. The second box has left: 200px</h3>
    <div id="box_1" class="box"></div>
    <div id="box_2" class="box"></div>
    <div id="box_3" class="box"></div>
</body>
</html>
​
    