CSS - position 속성

position 

•  html 요소를 원하는 위치에 배치하기 위해 사용하는 css의 속성이다.
• 정확한 위치 지정을 위해서 top / left / bottom / right 와 함께 사용한다. 
• 포지션의 5가지 속성
  -> static / relative / absolute / fixed / sticky

---

1. static

• static은 position 속성의 기본값이며 왼쪽에서 오른쪽/ 위에서 아래로 배치한다. 
• static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치된다. 임의로 위치 설정을 할 수 없다.

 

2. relative

• 요소의 원래 위치를 기준으로 상대적으로 배치, 이때 요소의 원래 자리는 그대로 차지한다.
•  자신을 기준ㅇ으로 top / left / bottom / right 를 사용해서 위치 조절이 가능하다.(얼마나 떨어지도록 설정)

 

3. absolute

 

4. fixed

• 브라우저 화면을 기준으로 고정된 배치, 글의 흐름에서 완전히 빠져서 요소의 원래 자리는 차지하지 않는다. 
• 브라우저 창을 어디로 스크롤 하더라도 계속 고정되어 표시된다.
• 웹페이지를 제작할 때, nav bar를 상단에 고정하는 방식 등으로 사용할 수 있다.

 

5. sticky

• 브라우저 화면을 스크롤 할때 효과가 나타난다. 
• 스크롤 될 때, 자신의 부모의 범위 안에서만 고정, 자신의 부모 위치가 뷰포인트에서 벗어나면 일반적인 흐름을 따른다.
• static 처럼 원래 위치에 배치되어 있다가 정해진 위치에 브라우저가 스크롤 되면 그때부터fixed처럼 고정되어 배치된다.