CSS position sticky가 안 될 때 부모 overflow 확인 방법

목록 제목에 position: sticky와 top을 넣었는데도 페이지를 내리면 함께 사라진다면, 제목보다 부모의 overflow를 먼저 확인하세요. 조상에 overflow: hidden이 있으면 화면 전체가 아닌 그 요소가 sticky의 스크롤 기준이 될 수 있습니다. 페이지를 따라 고정할 목적이고 단순히 넘친 부분만 자르려는 래퍼라면 overflow: clip을 검토할 수 있습니다.[1][2]

아래는 실제 고객 화면이 아닌 주문 목록 제목의 진단용 예제입니다. 소프트모아 업무 화면에서도 적용할 수 있는 확인 순서를 설명하되, 서비스 전체의 레이아웃을 일괄 변경하는 방법은 아닙니다.

제목을 어느 스크롤에 붙일지 먼저 정합니다

브라우저 페이지가 움직일 때 제목을 남길 것인지, 높이가 제한된 목록 패널 안에서만 남길 것인지부터 구분해야 합니다. 전자는 페이지 스크롤이 기준이어야 하고, 후자는 패널 자체가 스크롤되어야 합니다. 두 화면에 같은 수정안을 적용하면 한쪽의 의도한 동작을 없앨 수 있습니다.

sticky는 문서 흐름에 자리를 유지하면서 지정한 기준에 맞춰 위치가 조정되는 방식입니다. 단순히 fixed로 바뀌는 기능은 아닙니다. 세로로 붙이려면 top처럼 해당 축의 inset 값이 auto가 아니어야 하며, 부모 구간 끝에서도 계속 화면에 남는 것은 아닙니다.[1]

overflow 한 줄만 다른 독립 파일로 확인합니다

다음을 sticky.html로 저장해 브라우저에서 여세요. 배포 서버나 실제 주문 데이터 없이 실행할 수 있습니다. 앞부분 120px, 제목 48px, 본문 영역 1,000px을 두어 스크롤 위치에 따른 차이가 드러나게 했습니다.

<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<title>sticky overflow 재현</title>
<style>
  body { margin: 0; }
  .before { height: 120px; }
  .frame { overflow: hidden; }
  .pin {
    position: sticky; top: 12px; height: 48px;
    background: #ffe08a;
  }
  .content { height: 1000px; }
  .after { height: 100vh; }
</style>
<div class="before">아래로 스크롤하세요</div>
<section class="frame">
  <div class="pin">주문 목록 제목</div>
  <div class="content">목록 본문 영역</div>
</section>
<div class="after">고정 구간 다음 영역</div>
</html>

처음에는 .frame에 hidden이 적용되어 있습니다. 개발자 도구 Console에서 아래를 실행한 뒤, 스크롤이 끝나면 다음 조회를 실행하세요.

window.scrollTo(0, 300);

const pin = document.querySelector('.pin');
const frame = document.querySelector('.frame');
[window.scrollY, pin.getBoundingClientRect().top,
 getComputedStyle(frame).overflow];
// [300, -168, 'hidden']

Chrome 145 기반 브라우저에서 독립 파일을 실행한 결과입니다. 반환값은 순서대로 페이지 스크롤량, 제목 위쪽의 화면 좌표, 부모의 계산된 overflow입니다. top: 12px을 줬는데도 제목 좌표는 -168px이므로 화면 위로 사라집니다. hidden은 스크롤바가 보이지 않아도 스크롤 컨테이너를 만들 수 있습니다. 페이지를 내리는 것과 그 컨테이너를 스크롤하는 것은 다릅니다.[2]

같은 스크롤 위치를 유지한 채 다음을 실행합니다. 별도 라이브러리나 이벤트 처리는 추가하지 않습니다.

frame.style.overflow = 'clip';
[window.scrollY, pin.getBoundingClientRect().top,
 getComputedStyle(frame).overflow];
// [300, 12, 'clip']

이 예제에서는 제목이 화면 위 12px에 남았습니다. clip은 넘친 내용을 자르지만 스크롤 컨테이너는 만들지 않습니다.[2] 그래서 중간 래퍼가 만들던 기준을 없앤 뒤 의도한 페이지 스크롤 동작을 비교할 수 있습니다. 이 결과는 예제의 박스 크기와 스타일에서 측정한 값이지, 모든 사이트에서 같은 좌표가 나온다는 뜻은 아닙니다.

수정 뒤에도 사라지는 정상 구간이 있습니다

• clip 상태에서 pin.style.top = 'auto'를 실행하면, scrollY 300에서 제목 좌표는 -180px이었습니다. 예제에는 bottom도 없으므로 sticky 선언만으로는 세로 고정 기준이 생기지 않습니다.[1]
• top을 다시 12px로 돌리고 window.scrollTo(0, 1140)을 실행하면 제목 위쪽은 -20px, .frame의 아래쪽은 28px이었습니다. 높이 48px인 제목이 부모 구간 끝에 도달해 함께 올라간 결과입니다. 페이지 끝까지 무조건 남아 있어야 한다면 요구사항부터 다릅니다.

운영 화면에서는 개발자 도구 Elements에서 제목을 선택하고, 부모부터 바깥쪽으로 overflow-x와 overflow-y의 계산된 값을 확인하세요. 스타일 파일에 쓴 선언만 보지 말고 최종 적용값을 봐야 합니다. 한 축에만 hidden을 써도 다른 축의 계산값이 달라질 수 있으므로, 이 예제처럼 양쪽 축을 함께 다룬 결과와 혼동하지 마세요.[2]

목록 안을 스크롤해야 한다면 clip으로 바꾸지 않습니다

패널 내부 스크롤이 필요한 화면은 높이와 overflow: auto 등의 설정을 유지하고, 실제 그 패널을 스크롤하며 제목을 확인해야 합니다. 페이지 전체를 내리는 시험만으로 실패라고 판단하면 안 됩니다. 이 글의 수정은 내부 스크롤이 필요 없는 래퍼를 대상으로 합니다.

clip은 자바스크립트로도 해당 요소를 스크롤할 수 없고, hidden과 달리 그 자체로 새 블록 서식 맥락을 만들지 않습니다.[2] 기존 float 정리나 스크롤 이동에 의존하는 영역을 무작정 교체하지 마세요. 숨겨진 입력칸이 키보드 포커스를 받아도 보이지 않을 수 있으므로 탭 이동도 확인해야 합니다. 우선 작은 래퍼 하나에서 원인을 확인하고, 확대 화면과 지원 대상 브라우저에서도 제목·입력칸이 가려지지 않는지 점검하는 편이 안전합니다.

참고 문서

• [1] MDN position
• [2] MDN overflow

소프트모아는 해당 시스템을 구축합니다. 문의하기