[CSS] position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .container>div {
            width: 100px;
            height: 100px;
        }
        .static {
            background-color: salmon;
            position: static;
            /*  static : 정적인 
                position 속성의 기본값
                위치속성이 비활성화
            */
            z-index: -100;
        }
        .relative {
            background-color: aqua;
            position: relative;
            top: 10px;
            left: 20px;
            /*  relative : 상대적인
                기준 : 본인이 원래 있던 위치
                위치속성 활성화
             */
        }
        .absolute {
            background-color: cornflowerblue;
            position: absolute;
            top: 10px;
            left: 20px;
            /*  absolute : 절대적인 
                기준 : static이 아닌 부모 요소, 없다면? body
                위치속성 활성화
            */
            z-index: -50;
        }

        /*  z-index : 요소의 쌓이는 순서를 지정하는 속성
            - 큰 숫자 : 화면의 앞
            - 작은 숫자 : 화면의 뒤
        */

        .container {
            position: relative;
            background-color: gray;
            top: 100px;
            z-index: -99;
        }
        .fixed {
            background-color: violet;
            position: fixed;
            bottom: 0px;
            right: 0px;
            /*  fixed : 고정된 
                부모요소, 스크롤 전부 무시
                기준 : 최상위 태그
                위치속성 활성화
            */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="static">static</div>
        <div class="relative">relative</div>
        <div class="absolute">absolute</div>
        <div class="fixed">fixed</div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .redBox{
            background-color: red;
        }
        .blueBox{
            background-color: blue;
            position: relative;
            left: 100px;
        }
        .greenBox{
            background-color: green;
            position: relative;
            left: 200px;
        }
        .grayBox{
            background-color: gray;
            position: relative;
            left: 300px;
        }
    </style>
</head>
<body>
    <div class="redBox"></div>
    <div class="blueBox"></div>
    <div class="greenBox"></div>
    <div class="grayBox"></div>
</body>
</html>