position: fixed 관련 특징 및 이슈

position: fixed 특징

• 브라우저(윈도우)를 기준으로 원하는 위치에 고정시킨다

• 본인이 가지고있던 영역이 없어짐

• 스크롤 할 때 이동하지 않음

fixed 사용시 알아두면 좋은 이슈

• block 레벨요소에 fixed를 적용하게 되면 inline 요소와 같이 요소의 크기가 내용 만큼만 크기를 가지게 된다. 즉, 블록 레벨요소가 인라인 레벨 요소가 형태가 된다.

• fixed는 브라우저를 기준으로 삼기 때문에 width: 100%을 하면 브라우저 기준이 된다.

• 만약 fixed를 품고있는 부모 요소의 너비대로 움직이고 싶다면 부모요소에 -webkit-transform: translateZ(0); 를 적용하면 된다.

• 혹은 position: sticky를 사용하는것도 좋다.