position fixed는 무조건 뷰포트를 기준으로 위치를 잡는게 아니다??

프로젝트 중 마주친 문제
버튼에 position fixed를 적용해서 뷰포트 기준 위치를 잡으려고 했는데 제대로 위치가 잡히지 않았다.

position: fixed;
bottom: 0;

이렇게 했을때 내가 예상한 그림은

이렇게 뷰포트 아래에 버튼이 딱 붙을거라고 생각함

하지만 뜬금없는 위치로 이동했는데, 여러 삽질을 하다가 결국 mdn 문서를 보고 이유를 알아냈다.

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (perspective와 filter의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 top, right, bottom, left 값이 지정합니다. - MDN

이 부분에서 알수있듯, 조상 요소 중 하나라도 transform이 적용되어 있다면 fixed는 뷰포트를 기준으로 위치를 잡지 않는다.

예제

button을 div.container__button이 감싸고 있는 형태
여기서 button에 position fixed를 적용시키면 뷰포트를 기준으로 위치를 잡는다.

App.tsx

import * as React from 'react';
import './style.css';

export default function App() {
  return (
    <div className="container">
      <h1>Hello!</h1>
      <p>Start editing to see some magic happen :)</p>
      <div className="container__button">
        <button className="button">Button</button>
      </div>
    </div>
  );
}

css

.container__button {
  background-color: #fff;
  width: 300px;
  height: 300px;
  border-radius: 12px;
}

.button {
  width: 100px;
  height: 40px;
  border-radius: 12px;
  background-color: #fff;

  position: fixed;
  bottom: 0;
}

👉 뷰포트를 기준으로 위치를 잡음

그다음, button의 상위 요소인 div.container__button에 transform 속성을 적용시키면 button은 뷰포트를 기준으로 위치를 잡지 않고, 상위 요소인 div.container__button을 기준으로 위치를 잡는다.

.container__button {
  background-color: #fff;
  width: 300px;
  height: 300px;
  border-radius: 12px;
  transform: scale(1.2);
}

.button {
  width: 100px;
  height: 40px;
  border-radius: 12px;
  background-color: #fff;

  position: fixed;
  bottom: 0;
}

그동안 fixed는 무조건 뷰포트를 기준으로 위치를 잡는다고 알고있었는데 아니었다. mdn을 좀 더 꼼꼼히 읽었으면 금방 해결할 수 있는 문제였는데..! 아무튼 이번 기회에 새로운 사실을 알게 되었음