position은 어떻게 사용할까

position은 HTML요소를 원하는 위치에 배치하기 위해서 사용하는 CSS속성이다.

정확한 배치를 위해서 top,left,right,bottom속성과 함께 사용된다.

1.position:static

별도로 속성을 지정하지 않았을 시 디폴트로 적용되는 속성

HTML요소가 원래 있어야 할 곳에 위치함

right,left등 위치 속성이 무시된다.

2.position: relative

position속성을 relative로 설정 시 원래 위치에서 벗어나게 배치가 가능하다.

원래 위치를 기준으로 상대적 배치이다.( 즉 벗어나는 위치의 기준이 원래위치이다.)

top,left등과 같은 위치 속성이 사용가능하다.

**relative는 위치가 변경되었지만 다른 요소들과 상호작용을 하며 빈공간이라고 인식하지 않는다.

3.position:absolute

배치기준이 상황에 따라 다르다. 잘 사용해야한다.

만약 상위 부모가 position 속성을 가지고 있다면(static제외) 그 상위 요소를 기준으로 배치가 되며, 만약 상위에 없다면 DOM트리의 최상위인 <body>요소가 배치 기준이 됩니다.

보통은 부모위치를 기준으로 자식위치를 배정하는 일이 적지만 ( 직접 요소에 적용한다는 뜻) 만약 해야한다면 부모요소에 display:relative를 해주는것이 관례(?)이다.

**여기서 짚고가야 할 부분은 position:absolute은 HTML 문서상에서 독립이 되기 때문에 다른 요소들과 상호작용을 하지 않는다.

따라서 다음 요소들이 빈 공간이라고 인식하고 그 공간을 다음요소들로 채워집니다.

4.position:fixed

화면을 위아래로 스크롤해도 요소가 브라우저화면에서 고정되어 움직이는 않는 효과를 원할때 사용한다.

이때 고정되는 값의 기준은 viewport 즉, 브라우저의 전체화면을 말한다.

left,top과 같은 속성들은 브라우저의 상하단,좌우측으로부터 얼마나 떨어져있는지를 결정한다.

** 이 속성도 다른 요소들과 상호작용을 하지 않습니다.

5.position:sticky

최근 추가된 속성으로 특이하게 브라우저가 스크롤할때 효과가 나타납니다.

만약 부모요소에 스크롤이 있고(overflow:auto) 자식요소(sticky)에 top:0을 준다면 자식요소가 스크롤되면 브라우저의 top에 딱 붙어있는것을 볼 수 있다.

sticky로 설정된 요소는 설정된 영역(top:0)에 도달할때까지는 static속성처럼 행동하다가 설정된 영역에 다다르면 fixed속성처럼 행동한다.

다음 요소들은 sticky속성을 가진 요소가 위에 붙는거에 구애를 받진 않는다.

참고블로그)

codedive01