position
position 속성은 문서 상에 요소를 배치하는 방법을 지정.
top , right , bottom , left 속성이 요소를 배치할 최종 위치를 결정.
📌 값
-
static: 기본값.
요소를 일반적인 문서 흐름에 따라 배치. -
relative: 월래 있어야 하는 자리에서 움직이는 것.
자기 자신을 기준으로top,right,bottom,left의 값에 따라 오프셋을 적용.
( 오프셋은 다른 요소에는 영향 주지 않음. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은static일 때와 같음.) -
absolute: 내 item 담겨있는, 내 item에서 가장 가까운 박스 안에서 위치 변경 일어나는 것.
(요소를 일반적인 문서 흐름에서 제거, 페이지 레이아웃에 공간도 배정x
가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치.
단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼음.) -
fixed: 상자 안에서 완전이 벗어나서 윈도우 안에서 움직이는 것.
(요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정 x
단, 요소의 조상 중 하나가transform,perspective,filter속성 중 어느 하나라도none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼음.
(perspective와filter의 경우 브라우저별로 결과가 다름에 유의) ) -
sticky: 월래 있어야 하는 자리에 있으면서, 대신에 스크롤 하면 없어지지 않고 원래 있던자리에 그대로 붙어있음.
(요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로top,right,bottom,left의 값에 따라 오프셋을 적용. 오프셋은 다른 요소에는 영향 안줌.)
📌 배치 유형
위치 지정 요소
값이 static이 아닌 모든 요소 ( relative, absolute, fixed, sticky 중 하나)
상대 위치 지정 요소
상대적으로 배치된 요소는 문서 내에서 정상적인(normal) 위치에서 주어진 오프셋만큼 떨어지지만, 다른 요소에는 영향을 주지 않는다.
절대 위치 지정 요소
상대적으로 배치된 요소가 일반적인 문서 흐름에 따르는 것과 달리,
절대적으로 배치된 요소는 흐름에서 제거된다.
따라서 다른 요소는 그 요소가 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 가장 가까운 위치 지정 조상(즉, static이 아닌 가장 가까운 조상)을 기준으로 배치.
고정 위치 지정 요소
고정 위치 지정은 절대 위치 지정과 비슷하지만, fixed는 요소의 컨테이닝 블록이 뷰포트의 초기 컨테이닝 블록이라는 점에서 다르다.
스크롤에 관계 없이 화면의 특정 지점에 고정되는, "떠다니는"(floating) 요소를 생성할 수 있다.
끈끈한 위치 지정 요소
상대와 고정 위치 지정을 합친 것으로 생각할 수 있다.
끈끈하게 배치된 요소는 상대적으로 배치된 요소로 취급하지만, 주어진 경계선을 지나면 고정 위치를 갖게 된다.
-> 사전순 리스트의 레이블에 흔히 사용~!
📌 접근성 고려사항
화면을 확대해서 텍스트가 크게 보이게 했을 때 absolute나 fixed로 배치된 요소가 내용을 가리지 않도록 주의 !
📌 성능 및 접근성 문제
fixed나 sticky를 포함하는 스크롤 요소가 성능 및 접근성 문제를 유발할 수 있습니다.
-> 표시해야 되는 내용의 양, 브라우저 및 기기의 성능에 따라 60 fps를 유지하지 못해 일부 민감한 사용자에게는 접근성 문제가, 다른 모두에게는 사용자 경험 악화가 생긴다.
이 문제의 해결책 중 하나는 will-change: transform을 추가
✨ will-change
: 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다.
그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다.
< 주의점! >
-> 너무 많은 요소에 will-change 를 적용하지 말것.
-> 아껴 사용할 것.
-> 서둘러 최적화하기 위해 will-change 를 적용하지 말것.
-> 작업할 충분한 시간을 줄것.
브라우저는 모든 것을 최적화하기 위해 가능한 모든 것을 이미 시도하고 있기에 will-change 와 묶인 강한 최적화의 몇은 많은 기기 자원을 소모할 것이다.
또한 이 같은 과도한 사용은 페이지 속도를 늦추거나 엄청난 자원을 소비할 수 있다.
< 사용 >
/* 키워드 값 */
will-change: auto; /* 특정 의도 없음 */
will-change: scroll-position; /* 요소 스크롤 위치의 변경 혹은 변이에 대한 기대 */
will-change: contents; /* 요소 내용에 대한 변경 혹은 변이에 대한 기대 */
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animateable-feature> */
/* 전역 값 */
will-change: inherit;
will-change: initial;
will-change: unset;참고 : MDN Web Docs
