1. Position의 중요성
CSS에서 해당 특정 요소의 위치의 기본값을 다양하게 조정 할 수 있습니다. 대표적으로
position속성이 있는데, 이position이 어떻게 지정 되었느냐에 따라서top,bottom,left,right,z-index(요소가 겹칠 경우 쌓이는 우선 순위, 숫자가 가장 높은 순으로 우선순위를 가짐.)속성을 지정할 때 이동 되는 양상도 달라지게 되므로 주의해서 지정해 주어야 합니다.
2. Static
먼저 static은 말 그대로 방향 제어 속성을 주어도 해당 요소가 생성 된 축을 기준으로 움직이지 않으면서 기존에 생성된 위치를 고수하는 속성을 의미합니다.
3. Relative
초기에 생성된 컨텐츠의 위치를 기준으로 방향 제어 속성을 적용 받는 속성을 의미합니다. 설정한 방향과 값에 따라 움직이며, 주변의 요소 변화에 따라 해당 요소의 값도 같이 바뀝니다.
그래서 대표적으로 Relative와 Static이 비교될 때에는 둘 다 문서의 흐름에 따라 배치된다는 공통점과, 방향 제어를 할 수 있는 Relative, 할 수 없는 Static의 차이점으로 정리 할 수 있습니다.
4. Absolute
relative와 마찬가지로 방향 제어 속성의 영향을 받습니다만, 차이점이 있다면 상위 태그(부모 요소)에 position 속성이 걸려있지 않은 경우(이 경우 position의 default 값은 static 입니다.) 부모 요소의 범위에서 벗어나 최상위 노드인 웹페이지의 기준에서 해당 요소가 배치되기 때문에
상위 노드인 부모 태그의 position 속성을 포지셔닝 컨텍스트에 따라 relative, static, fixed 중 하나의 속성으로 준 후 positin을 Absolute로 지정하여 사용하는 것이 일반적입니다.
그리고 이러한 Absolute와는 반대되는 개념은 Static인데, 문서의 흐름을 유지하면서 고정 된 상태로 방향 제어가 불가능한 Static에 반해, 문서의 흐름에 완전히 빠져나오면서 부모 태그의 원점에 위치하면서 방향 제어가 가능한 Absolute라는 점을 놓고 차이점을 정리할 수 있습니다.
5. Fixed
기존 문서의 흐름에서 빠져나온 후 뷰포트의 원점을 기준으로 위치를 잡고, 방향을 주게 되면 해당 포지션을 기준으로 주변 요소 및 창의 스크롤 및 이동 변화에도 불구하고 해당 포지션을 고수합니다. 주변 요소들과의 관계(flow)를 끊고 독자적으로 존재하는 요소가 되죠. 주로 메뉴바에 Fixed를 고정하며 스크롤을 내렸을때에도 특정 위치를 고수하고 싶을때 사용됩니다.
이때 방향 제어를 양쪽으로 주게 될 경우 Fixed의 특징상 화면 왼쪽과 오른쪽에서 떨어트린 나머지 영역을 차지하게 되는 효과가 생기기 때문에 이를 이용한 컨텐츠 배치도 가능하게 됩니다.
6. Sticky
최초로 생성 된 포지션을 기준으로 스크롤을 내리기 전까지는 해당 포지션을 고수하다가 스크롤이 이동함에 따라 fixed와 같이 해당 방향 반대쪽으로 고정되는 효과를 주는 속성입니다. 위에서 설명 드린 static과 유사하면서도 차이점을 보이는건
그리고 sticky와 fixed는 자기만의 위치를 고수하면서 방향 제어가 가능하다는 동일점과, 해당 문서의 다른 요소들과의 상호 관계(flow)를 유지하고 싶다면 sticky를, 그렇지 않고 독자적인 요소로 상호 관계(flow)를 유지하지 않고자 할때에는 fixed를 사용하는 대에서 그 차이점을 볼 수 있습니다.
⭐ 기존 문서의 흐름 팔로잉 여부에 따라 유지하는 쪽은 relative, static, sticky로, 유지하지 않고 독자적인 위치를 형성하는 쪽은 absolute, fixed로 나뉠 수 있고
방향 제어가 가능한지의 여부에 따라서는 불가능한 static을 제외하면 나머지 속성들은 방향 제어가 가능하다는 점에서 그 차이점을 둘 수 있습니다.
7. 포지션과 z-index 간의 상관 관계
z-index 속성은 요소의 쌓임 순서를 결정하는 데 사용됩니다. 즉 겹쳐있는 아이템들의 우선 순위를 정하는 용도로 사용되는데요.
우선 position 중에서 static을 제외하면 나머지 속성은 z-index의 효과를 받으며, 요소들 중에서 z-index가 동일하다는 가정 하에 position이 static을 제외하고 설정되어 있는 요소는 position이 static이거나 따로 설정되어 있지 않은 요소들에 비해 z-index의 우선권(상위 노출)을 가지게 됩니다. 또한 static을 제외하고 모든 요소들이 각각의 포지션 값을 가지고 있을 경우 가장 늦게 생성된 요소가 우선권을 가지게 됩니다.
하지만 z-index가 다르다고 가정해서 본다면 만약 모든 요소가 포지션을 가지고 있지 않거나, static을 제외한 position 값을 가지고 있을 경우 z-index가 큰 값 순서로 상위 노출을 하게 되며, 음수(-1)일 경우 그 크기에 상관 없이 가장 하위에 묻히게 됩니다.
