Understanding position in css

As the convention goes there are 4 main values to be used for the position parameter in css. They are static, fixed, absolute, and relative. Let’s first start off with a bunch of divs and proceed from there:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="border: 2px solid blue;">
        <div style="border: 2px solid black; height: 80px; width: 80px;">
            First Box
        </div>
        <div style="border: 2px solid black; height: 80px; width: 80px;">
            Second Box
        </div>
        <div style="border: 2px solid black; height: 80px; width: 80px;">
            Third Box
        </div>
    </div>
</body>
</html>

This should create 3 boxes within a larger div

3 divs

Static

Static is pretty much the default. Using static is no different to leaving the position parameter blank in css. Try chaning the position of the divs to static and have a look, they remain exactly the same

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="border: 2px solid blue;">
        <div…