포지션

position: relative, absolute, fixed;

지정된 태그의 위치를 지정해주는 스타일

    <style>
        .box {
            width: 300px; height: 300px;
            border: 1px solid black;
        }
        .box1 {background-color: aqua; position: relative; left: 100px; top: 60px; z-index: 3;}
        .box2 {background-color: brown; position: relative; left: 70px; bottom: 30px; z-index: 1;}
        .box3 {
            background-color: blueviolet; position: fixed; top: 0px; left: 0px;
            width: 100%; height: 50px;
        }
        .box4 {
            background-color: yellow;
            width: 600px; height: 450px;
            position: relative;
        }
        .child {
            background-color: antiquewhite;
            position: absolute; right: 0px; bottom: 0px;
        }
    </style>

    <div class="box box1">박스1</div>
    <div class="box box2">박스2</div>
    <div class="box box3">박스3</div>
    <div class="box box4">
        박스4
        <div class="box child">자식</div>
    </div>

z - index : 뒤에 적힌 숫자의 크기에 따라 z축(높이)를 지정함(크기순)

fixed : 박스를 지정한 위치에 고정함

absolute : 박스를 부모의 크기 내에서 지정된 위치로 옮김

*absolute를 쓸땐 부모에 포지션 relative나 absolute가 적용되어 있어야 한다