CSS Position ( static, relative, absolute, fixed )

Css 포지션에 관해 설명해드리겠습니다.

포지션이란 태그들의 위치를 결정하는 CSS입니다.

먼저 static에 대해 알아봅시다.

 

 

📌 static

 

태그들을 생성하면 그 태그들의 포지션은 일단 static입니다. 한마디로 static은 디폴트값입니다.

특성은 차례대로 쌓이는데요. 다음 예시를 통해 단단히 이해합시다.

 

 

위에서부터 아래로 차례대로 쌓입니다.

 

 

📌 relative

 

태그의 위치를 바꿀 때 사용하는 속성입니다. relative를 통해서 위, 오른쪽, 아래, 왼쪽으로 위치를 조절할 수 있습니다.

그리고 absolute를 쓸 때 위치를 잡아주는 영역입니다.

 

즉 relative는 absolute가 하위태그에 존재할 때 마음껏 이동을 못하도록 방지하는 역할을 합니다. 영역 제한의 역할을 가집니다.

 

 

📌 absolute

 

relative가 static인 상태를 기준으로 움직인다는 반면 absolute는 position: static 속성을 가지고 있지 않은 부모 태그를 기준으로 움직입니다.

 

근데 static속성만 있는 부모태그가 존재한다면 가장 상위태그가 바로 그 기준을 잡습니다.

 

예를 들어서, absolute가 width 10, height 10px로 이동하면 relative가 지정한 범위안에서 해당한 그 영역만큼만 이동되는 것입니다.

 

📌 fixed

 

위치가 항상 고정되어있는 태그입니다.

스크롤바를 무한대로 내려도 항상 그 지정된 위치에 고정되어있습니다.