[CSS] position의 이해. static/relative/absolute/fixed 그리고 sticky.

CSS 속성 중 fixed와 sticky 활용을 잘 못하는 것 같아서, 다시 한 번 점검용으로 또 면접 준비용으로 기록을 남겨보려고 한다. 우선 CSS의 position property에는 static, relative, absolute, fixed, sticky 다섯 종류가 있다.

CSS의 각 속성은 top, right, left, bottom의 속성에 값을 넣어 최종적으로 문서 내 요소가 의도대로 배치될 수 있도록 도와준다. 단, static의 경우에는 해당 속성들은 물론, z-index 같은 속성의 도움을 받을 수 없다. 문서의 원래 흐름에 자연스럽게 위치되기 때문이다.

relative

해당 속성을 가지는 요소는 원래의 문서 흐름을 배제하지 않지만, 자기 자신을 기준 삼아 top, bottom, right, left 등의 값에 따라 위치를 배치한다. 다행인 점은 이런 오프셋이 다른 요소에 방해를 주진 않아 결과적으로 해당 요소가 레이아웃에서 차지하는 공간은 static과 차이가 없다.

absolute

이 속성을 사용하면서부터는 문서 흐름에서 벗어난 요소가 된다. 페이지 레이아웃 상에서 해당 요소에게 줄 공간이 없어지게 되는데, 대신 가장 가까운 부모 요소에 의존해 위치가 배치된다는 점이 특이하다. 이때, static이 아닌, 위치가 지정된 부모 요소를 발견하지 못하면 아예 최상위 블록에 의존한다.

relative 속성과 마찬가지로, absolute 속성의 요소가 지니는 margin은 다른 요소의 margin과 충돌이 날 걱정은 하지 않아도 된다. 다른 요소에 방해를 하지 않고 위치가 지정된다.

fixed

absolute과 마찬가지로 문서 흐름에서 배제되며, 페이지 레이아웃 위에서도 할당된 공간이 없다. 대신, viewport 상의 초기 컨테이너 위를 기준으로 삼는다. 그래서 스크롤 시에도 요소가 이동되지 않는 특징이 있다.

sticky

이 속성을 사용한 요소는 문서 흐름을 따른다. 가까운 부모 요소 중 스크롤 동작에 관여하는 overflow, hidden, scroll, auto 또는 overlay 속성이 존재하는 요소에 '붙는다' 즉, 평소에는 relative처럼 동작하다가 스크롤 컨테이너 등에서 스크롤 액션 등이 발생하면 fixed 속성처럼 화면에 고정이 되는 것이다.

Web Accessibility Issue

MDN의 설명에 따르면, 해당 요소를 사용할 때 고려할 만한 사항으로 화면 확대 시 텍스트가 덩달아 커질 때, 같은 페이지 위 absolute나 fixed로 위치가 지정된 요소가 해당 내용을 가리지 않도록 주의 해야 한다고 하는데, 플로팅 버튼으로 띄운 저시력자용 줌인/아웃 버튼이 함께 확대되며 이러한 현상을 일으킨다는 생각이 들었다. 일정 배율 이상 확대가 되지 않도록 한다고 해도, 텍스트를 가릴 수 있을 것 같아서, 시간이 나면 위치 조정을 해야겠다는 생각이 든다.

스크롤 요소의 접근성 문제와 관련해 Fixed/Sticky Navigation Menu Blocks Text 이라는 아티클을 읽어보았다. 위에 언급한 문제와 연관해 생각해보자면,

• 해당 페이지가 fixed floating button(navigation menu)의 장점을 잘 살리고 있는지 확실히 해야 한다.
• 해당 버튼을 문서 상단에 위치시켜 상대적으로 웹 페이지를 읽어나갈 때 덜 방해를 받을 수 있도록 한다.
• 또는 유저에게 선택권을 주어 fixed navigation을 보일지 말지를 정할 수 있도록 한다.

등의 체크리스트로 점검해볼 수 있겠다.

또한 fixed나 sticky 사용 시의 퍼포먼스 문제가 있을 수도 있는데, 인터랙티브 웹 페이지 튜토리얼을 수강하면서도 해결법 중 하나로 제시되었던 will-change: transform CSS 속성을 추가해 웹 브라우저로 하여금 성능 상의 이점을 취하도록 할 수 있다고 한다.