[html/css] CSS에서 position에 대해 이해하기

 

개인적으로 css를 작성할 때, 가장 감으로 하는 부분인 것 같다.
제대로 이해하고 쓸 수 있도록 공부하자 😡

 

 

position

따로 position을 지정해주지 않으면, 기본적으로 요소들은 `static`으로 지정되어있다.
또한 대부분 position은 요소의 정확한 위치 지정을 위해서 `top`, `left`, `bottom`, `right` 속성과 함께 사용된다는 것을 알아두자.

** position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block의 특징이 사라지게 된다.

 

1. static

요소에 적용되는 기본값이다.
요소가 HTML 문서 흐름에 따라 배치되며, top, right, bottom, left 속성이 적용되지 않는다.

 

2. relative

요소가 HTML 문서 흐름에 따라 배치되지만,
자신을 기준으로 이동할 수 있기 때문에 top, right, bottom, left 속성이 적용된다.
즉, 원래 위치를 기준으로 상대적(relative)으로 배치해주는 것이다.

 

3.absolute

요소의 position 속성이 absoulte가 되면,
요소의 배치가 HTML문서를 따라 배치되지 않고 문서흐름에서 제거된 뒤, 상위(부모)요소를 기준으로 새롭게 배치되게 된다.
DOM 트리를 따라 올라가다가 `position 속성이 static이 아닌 첫 번째 상위 요소를 기준`으로 삼게된다.
(없다면, body요소가 배치기준이 된다.)

따라서 보통 relative속성을 활용해서 absolute를 사용하게 된다.
(상위 요소에 relative을 걸어준다.)

 

4. fixed

fixed를 설정하면 요소를 특정 위치에 항상 고정시킬 수 있다. 

요소는 문서흐름에서 제거되고(즉, 공간도 배정되지 않는 것이다.) 뷰포트에 상대적으로 위치되게 된다.

(단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다. (perspective와 filter의 경우 브라우저별로 결과가 다름에 유의) )

5. sticky

요소를 일반적인 문서 흐름에 따라 배치하지만, 스크롤이 지정한 임계값(top 등으로 지정)을 넘으면 마치 fixed처럼 화면에 고정되게된다.

테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 부모와, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상)을
기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용하며 오프셋은 다른 요소에는 영향을 주지 않는다.

특정 임계값은 부모요소와 적용한 오프셋에 따라 정해지는데, 이때 부모요소 사이에 overflow: hidden 이 적용되있는 요소가 있을 경우에는 sticky 속성이 제대로 동작하지 않으므로 주의해야한다.

** 만약 기준으로 삼은 부모가 사실 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "sticky" 동작을 보이지 않는다는 점에 주의해야한다.
sticky 요소가 중간에 멈추는 기준은 부모 요소의 크기 내에서 멈추게 된다.
sticky 요소는 부모 요소 정확히 override: hidden 이 아닌 요소의 크기 밖으로 나갈 수 없다.
만약 sticky 요소가 모든 조건을 충족 (위치지정 및 override: hidden 요소 없음) 했는 데도 불구하고 제대로 동작하지 않는다면 부모 요소의 크기가 어떤지를 먼저 체크해봐야한다.

 

 

 

 

참고

https://engkimbs.tistory.com/entry/HTMLCSS-position-%EC%86%8D%EC%84%B1-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0