position은 말 그대로 엘리먼트들의 위치를 결정하는 css입니다.
기본값으로는 static으로 지정되어 있으며(따로 명시할 필요가 없습니다) 엘리먼트가 생길때마다 차례대로(왼쪽에서 오른쪽, 위에서 아래) 위치하게 합니다.
position의 속성 중 static을 제외한 3가지 속성인 relative, fixed, absolute에 대해 더 알아보겠습니다.
첫번째로 relative입니다.
top, right, bottom, left 속성을 사용해 static으로 지정했을 경우의 위치를 기준으로 위치를 지정합니다.. 아무것도 지정되어 있지 않다면 기본 속성인 static과 똑같이 동작합니다.
두번째로 fixed입니다.
fixed는 relative와 마찬가지로 top, right, bottom, left 속성을 사용해 위치를 지정합니다. 다만 다른점은 fixed를 사용할 경우 위치가 고정되어 스크롤을 사용하더라도 그자리에 계속 위치한다는 점입니다.
세번째로 absolute입니다.
absolute 역시 top, right, bottom, left를 사용해 위치를 지정합니다. 다만 기준에 대해 차이가 있습니다. relative가 static으로 지정했을 경우의 위치에 따라 위치를 조절했다면 absolute는 static속성을
갖지 않은 부모를 기준으로 위치가 정해지며 static속성을 가진 부모가 없을경우 body를 기준으로 위치가 정해집니다.
응애