relative

position: relative; 자체로는 특별한 의미가 없다.

위치를 이동시켜주는 top, right, bottom, left 프로퍼티를 사용하여 원래의 위치에서 이동할 수 있다.

absolute

position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있다.

특정 부모를 기준으로 움직이며, 부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직인다.

일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여한다.

fixed

fixed는 부모 태그가 필요없으며, 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직인다.

예를 들어, footer 태그에 fixed 값을 주면 화면을 위,아래로 움직이더라도 항상 화면 밑 부분에 고정되어 표시된다.