1. Position 속성
- HTML 에서 element 를 배치하는 방법을 지정하는 속성
2. 속성 값
-
Positio 속성의 값은 총 5개가 있습니다.
-
static, relative, absolute, fixed, sticky
2.1 static (기본 값)
-
element가 문서(HTML)에서 일반적인 흐름에 따라 배치
-
position 속성을 지정하지 않았을 때 기본으로 적용되는 값
-
static의 경우 top, right, botton, left, z-index 속성들이 아무런 효과를 주지 못함.
2.2 relative
-
element가 문서(HTML)에서 일반적인 흐름에 따라 배치
-
static 과의 차이점은 element가 자신의 static 위치에서 top, right, bottom, left 와 같은 속성에 의한 상대적인(relative)위치에 배치
-
relative 인 경우에 top, right, bottom, left 을 지정하지 않는 경우, static과 동일하게 보임.
-
다른 element에 전혀 영향을 끼치지 않으며, 따라서 글자가 겹쳐 보일수도 있으므로 주의해야 함.
2.3 absolute
-
element가 문서(HTML)에서 일반적인 흐름을 따르지 않음.
-
가장 가까운 위치에 있는 부모 element에 대해 상대적 위치로 배치
-
부모 element가 없는 경우 body element에 대해 상대적으로 배치
2.4 fixed
-
element가 문서(HTML)에서 일반적인 흐름을 따르지 않음.
-
대신, 스크린의 뷰포트를 기준으로 한 위치에 배치
즉, 스크롤되어도 움직이지 않는 고정된 자리를 가짐.
※ 뷰포트(viewport) : 웹페이지가 사용자에게 보여지는 영역 -
웹페이지에 선택박스 등이 화면을 움직여도 따라 다니는 기능을 구현
2.5 sticky
-
element가 문서(HTML)에서 일반적인 흐름에 따라 배치
-
sticky는 문서의 흐름을 따르면서 containing box를 기준으로 상대적인 위치에 배치
-
즉, fixed를 쓰면 요소들이 겹쳐보일 수 있는 상황이 나올 수 있는 반면 sticky를 쓰면 그러한 상황을 예방 가능
출처 : https://medium.com/@yeon22/css-css-position-%EC%84%A4%EB%AA%85-f2c0a0b26556
