[CSS] position 을 적용하면 Layout 단계에서 어떤 일이 일어날까 ?
CSS Position
우리가 페이지의 어떤 레이아웃을 특정위치에 배치하기 위해서 css의 position속성이 주로 사용됩니다.
position 속성은 default로 static이라는 값을 가지며,
relative, fixed, absolute, sticky의 값으로 변경 될 수 있습니다.
| value | description |
|---|---|
| static | 요소를 일반적인 문서 흐름에 따라 배치합니다. |
| relative | 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. |
| absolute | 원하는 위치를 지정해 배치. |
| fixed | 지정한 위치에 고정하여 배치. |
| sticky | 위치에 따라서 동작방식이 달라짐. 요소가 임계점(scroll 박스 기준) 이전에 는 relative와 같이 동작. 그 이후에는 fixed와 같이 동작. |
Position에 따른 Layout 단계 절차
각 포지션에 따라 브라우저 렌더링 단계인 Layout시 어떤 절차에 의해 위치를 계산하는지 알아보자
절차는 browser rendering 과정의 레이아웃 단계에서 요소의 크기(Box modal)와 위치(nomal-flow, positioning)를 결정하게 됩니다.
- box modal : css box-modal의 width, height를 계산하는 단계.
- nomal flow : 마크업 순서에 따라 위에서 아래로 왼쪽에서 오른쪽으로 element들이 배치하는 단계.
- positioning : top,bottom,left,righ에 따른 위치 계산하는 단계.
position: static
요소를 문서 흐름에 맞추어 배치
절차 : box modal -> nomal flow
위 position:static의 값이 지정되어 있다면, 박스 사이즈를 계산 후 nomal flow에 따라 element들을 배치 합니다.
position: relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
절차 : box modal -> nomal flow -> positioning
position: relative로 적용된 element는 static과 마찬가지로 박스 사이즈를 계산 후 nomal flow에 따라 element들을 배치 합니다.
하지만 다음 단계인 positioning에 의해 left, top 등의 상대 위치를 조정하는 단계가 추가적으로 적용되어, position: relative가 상당수 반복되어 적용된다면 브라우저 렌더링 퍼포먼스를 하락시키는 원인이 되기도 합니다.
position: absolute, fixed
여기서 position fixed와 absolute는 모두 부모 엘리먼트에 구애 받지 않고, 엘리먼트를 자유롭게 배치(절대 위치) 하고 싶을때 사용 됩니다.
절차: box modal -> positioning
여기서 다른 positioning값들과 비교되는 절차는 nomal flow에서 제외된다는 것이다.
이는 reflow를 유발 시키는 css수정이 absolute나 fixed내부에서 발생한다면, 브라우저는 이를 알아차리고 최소한의 범위에서만 element를 reflow 한다는 것이다. 이러한 이유에 의해 매초 수백 수천번 렌더링 될 수 있는 애니메이션 같은 경우 position: absolute 값을 주어 브라우저 전체가 렌더링 되는것을 막아 퍼포먼스 향상을 기대할 수 있다.
absolute, fixed의 차이
position: absolute와 fixed를 적용한 컴포넌트는 left, right, top, bottom의 절대적 위치를 지정 할 수 있습니다.
각각의 값은 기준으로 부터 얼마나 떨어져 있을것인지를 의미합니다.
하지만 absolute와 fixed를 사용할때 각각의 기준이 달라지게 됩니다.
positon:absolute에서 기준이 되는 위치는 가장 가까운 부모 요소면서 조상 요소 중 position속성이 static이 아닌 요소입니다.
하지만 position:fixed라면 position:relative인 제일 가까운 부모 혹은 조상 요소가 아닌 뷰 포트(브라우저 창)이 기준이 됩니다.
언제 fixed와 absolute를 사용할까?
position:fixed는
- 스크롤이 내려가더라도 떠있는 header
- modal
- 오른쪽 하단에 항상 떠있는 floating 버튼
position: absolute는
- 특정 엘리먼트 내에서 다른 엘리먼트와 관계 없이 움직여야 하는 경우
위와 같이 사용되면 좋을거 같습니다.
출처
