[CSS] position 속성에 대해서

>  position 속성

• 문서 상에 요소를 배치하는 방법을 정의함.
• position : 요소의 배치 방법 결정.

 

 

>  선택적으로 사용해 위치를 지정함.

• top : 윗면에서부터 떨어뜨리는 정도.
• bottom : 아랫면에서부터 떨어뜨리는 정도.
• left : 왼쪽면에서부터 떨어뜨리는 정도.
• right : 오른쪽면에서부터 떨어뜨리는 정도.

 

---

>  position 속성값

• static : 기본값. 일반적인 문서 흐름에 따라 배치.
• relative : 자신의 원래 위치를 기준으로 오프셋 적용.
• absolute :  가장 가까운 포지션 요소를 기준으로 오프셋 적용.
• fixed : 스크롤이 이동해도 고정되어 움직이지 않도록 지정.
• sticky : 스크롤 동작이 되는 상위 요소를 기준으로 오프셋 적용.

 

---

>  position: relative;

• 요소를 일반적인 문서 흐름에 따라 배치함.
• 그러나 상하좌우 위치 값에 따라 오프셋을 적용함.

 

ex.

 

---

>  position: absolute;

• 요소를 일반적인 문서 흐름에서 제거함. 
• 상위 요소 중 가장 가까운 포지션 요소에 대해 상대적으로 오프셋을 적용함.
• 상위 요소 중 포지션을 정의하는 요소가 없다면, 브라우저 화면을 기준으로 적용됨.

 

ex.

 

---

 

---

>  position: fixed;

• 요소를 일반적인 문서 흐름에서 제거함.
• 지정한 위치에 고정시켜 움직이지 않게 함.

 

ex.

 

---

---

 

---

>  position: sticky;

• 요소를 일반적인 문서 흐름에 따라 배치함. 
• 스크롤 동작이 존재하는 가장 가까운 상위 요소에 대해 오프셋 적용.
• 스크롤 이동으로 요소가 움직여도 고정된 상태를 유지함.

 

ex.

---