[ Rendering Logic2 ] Fixed Positioning

Fixed Positioning

fixed positioning은 absolute와 비슷한 역할을 한다.

차이점은 훨씬 반항적이여서 뷰포트에서만 억제가 가능하다. 

(viewport는 현재 눈에 보이는 웹사이트의 일부)

 

가장 많이 쓰이는 이유는 스크롤에 영향을 받지 않기 때문에 고정시킬때 많이 쓰인다.

위의 해당 버튼은 스크롤할 때도 움직이지 않고 고정되어있습니다.

Instead of the closest non-static ancestor, it listens to the “initial containing block”, a box the size and position of the viewport

 

absolute 로 modal을 만든 것 처럼, fixed 로도 모달같은 오버레이 효과를 줄 수 있습니다.

Absolute와 fixed의 차이점을 보면, 스크롤의 대해서 영향을 받는지 안받는지에 대해서 알 수 있습니다!

(앞으로 modal은 fixed가 좋지 않을까? 생각을 해봅니다....)

 

The transform exception (변환 예외)

일반적으로 fixed는 viewport 기준으로 배치되지만 한가지 예외가 있습니다!

parent나 grand parent가 transform 속성을 사용하는 경우는 fixed element  에 containing블록이 되어 absolutly-positioned 된다.

기억 할 점은 transform된 부모가 fixed children을 가질 수 없다는 것이다. 

이것은 어떤 부모든 해당 속성을 가지고 있으면 자식은 영향을 받기 때문에 자바스크립트 스니펫을 사용하여 

fixed가 작동하지 않는 원인을 파악할 수 있습니다! 

아래는 해당 스니펫입니다.

const selector = '.the-fixed-child';
function findCulprits(elem) {
  if (!elem) {
    throw new Error(
      'Could not find element with that selector'
    );
  }
  let parent = elem.parentElement;
  while (parent) {
    const {
      transform,
      willChange
    } = getComputedStyle(parent);
    if (transform !== 'none' || willChange === 'transform') {
      console.warn(
        '🚨 Found a culprit! 🚨\n',
        parent,
        { transform, willChange }
      );
    }
    parent = parent.parentElement;
  }
}
findCulprits(document.querySelector(selector));