[CSS] position: fixed일 때 상하스크롤이 안되는 문제 해결

const Supply = () => {
  return (
  <Container>
    ...
  </Container>);
};

const Container = styled.div`
  position: fixed;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
`;

port default Supply;

Next.js로 만든 Supply 페이지 코드의 일부이다.

여기서 페이지가 상하스크롤이 안되는 문제가 있었다.

 

---

상하스크롤이 작동하지 않는 이유: Supply 컴포넌트의 Container가 position: fixed 로 설정되어 있기 때문.

position: fixed는 화면에 고정된 위치에 요소를 배치하는 것을 의미함. 요소의 위치는 뷰 포트에 상대적임. 따라서 컨테이너의 높이가 100%로 설정되어있어도 스크롤이 작동하지 않음. (분홍색 친 부분은 이해 안 가서 쳐놨다. 좀 더 찾아봐야겠다.)

 

스크롤이 작동하려면 

position: relative;

혹은

position: absoulte;

를 사용해야 함.

그래야 컨테이너가 문서 흐름에 따라 배치되고 내용이 컨테이너의 크기를 넘어가면 스크롤이 작동함.

---

근데 지금 하고 있는 프로젝트에서는 position: relative를 하니 모양이 완전 일그러졌다.

그래서 position: absolute를 해서 해결했다.

 

1. position: relative:
   • 상대적인 위치를 설정합니다.
   • 요소가 문서 흐름에 따라 배치되며, 기본 위치를 기준으로 이동합니다.
   • top, right, bottom, left와 같은 속성을 사용하여 요소를 이동시킬 수 있습니다.
   • 주변 요소들과의 상호작용에서 영향을 받습니다.
2. position: absolute:
   • 절대적인 위치를 설정합니다.
   • 요소가 문서 흐름에서 제거되고, 부모 요소나 가장 가까운 조상 요소 중 position: relative를 가진 요소를 기준으로 위치합니다.
   • 부모 요소의 위치에 영향을 주지 않고, 다른 요소들과 겹칠 수 있습니다.
   • top, right, bottom, left와 같은 속성을 사용하여 요소를 정확한 위치에 배치할 수 있습니다.
3. position: fixed:
   • 고정된 위치를 설정합니다.
   • 요소가 뷰포트를 기준으로 위치하며, 스크롤해도 항상 같은 위치에 유지됩니다.
   • 다른 요소들과 겹치지 않으며, 다른 요소들에게 영향을 주지 않습니다.
   • top, right, bottom, left와 같은 속성을 사용하여 요소를 정확한 위치에 배치할 수 있습니다.

출처: Chatgpt