position

1. relative

1) 기준: 자기 자신

2) 사용

.box {
    position: relative;
    top: 10px;
    left: 10px;
}

자신의 본래 위치를 기준으로 움직인다.

2. absolute

1) 기준: position 속성값 relative, fixed, absolute를 가진 부모

2) 사용

//부모
.container {
    position: relative;
}

//자식
.box {
    position: absolute;
    top: 10px;
    left: 10px;
}

부모 중에 position 속성값으로 relative / fixed / absolute 이 셋 중 하나를 가지고 있다면 해당 부모를 기준으로 움직인다.

3. fixed

1) 기준: 유저에게 보여지는 화면

2) 사용

.box {
    position: fixed;
    top: 10px;
    left: 10px;
}

fixed를 사용하면 기존 위치에서 빠져나와 유저가 보는 화면을 기준으로 움직인다. 이는 스크롤을 내려도 페이지를 따라 화면에서 사라지는게 아니라 해당 위치에 계속 고정되어 있다. 화면 맨 위에 박혀있는 헤더 navbar가 대표적인 예다.