29:I[536515,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostViewTracker"] 2a:I[207142,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostBackButton"] 2b:I[390236,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostSummary"] 2f:I[948688,["/_next/static/immutable/chunks/1opgw09b2rf0r.js"],"IconMark"] 28:T596,{"@context":"https://schema.org","@type":"BlogPosting","headline":"sticky 요소가 아래 콘텐츠 클릭을 막을 때","description":"증상position: sticky로 고정된 요소가 있는 레이아웃에서, 스크롤 후 특정 영역을 클릭했는데 아무 반응이 없는 경험을 한 적 있을 것이다. 클릭한 것 같은데 동작하지 않거나, 엉뚱한 곳의 이벤트가 발생하는 경우다.원인은 이벤트 처리가 아니라 렌더링 순서에 있을 가능성이...","image":["https://3d-blog.vercel.app/blog/category/회사/post/sticky-%EC%9A%94%EC%86%8C%EA%B0%80-%EC%95%84%EB%9E%98-%EC%BD%98%ED%85%90%EC%B8%A0-%ED%81%B4%EB%A6%AD%EC%9D%84-%EB%A7%89%EC%9D%84-%EB%95%8C/opengraph-image"],"author":{"@type":"Person","name":"성창수"},"publisher":{"@type":"Organization","name":"3D Blog","logo":{"@type":"ImageObject","url":"https://3d-blog.vercel.app/opengraph-image"}},"datePublished":"2026-03-19T23:37:45.854Z","dateModified":"2026-08-17T12:40:52.972Z","mainEntityOfPage":{"@type":"WebPage","@id":"https://3d-blog.vercel.app/blog/category/회사/post/sticky-%EC%9A%94%EC%86%8C%EA%B0%80-%EC%95%84%EB%9E%98-%EC%BD%98%ED%85%90%EC%B8%A0-%ED%81%B4%EB%A6%AD%EC%9D%84-%EB%A7%89%EC%9D%84-%EB%95%8C"},"url":"https://3d-blog.vercel.app/blog/category/회사/post/sticky-%EC%9A%94%EC%86%8C%EA%B0%80-%EC%95%84%EB%9E%98-%EC%BD%98%ED%85%90%EC%B8%A0-%ED%81%B4%EB%A6%AD%EC%9D%84-%EB%A7%89%EC%9D%84-%EB%95%8C"}2c:T226b,

증상

position: sticky로 고정된 요소가 있는 레이아웃에서, 스크롤 후 특정 영역을 클릭했는데 아무 반응이 없는 경험을 한 적 있을 것이다. 클릭한 것 같은데 동작하지 않거나, 엉뚱한 곳의 이벤트가 발생하는 경우다.

원인은 이벤트 처리가 아니라 렌더링 순서에 있을 가능성이 높다.

왜 이런 일이 생길까

브라우저는 DOM에 등장하는 순서대로 요소를 그린다. 나중에 오는 요소가 먼저 오는 요소 위에 쌓인다. z-index를 별도로 지정하지 않아도 그렇다.

<div class="container">
  <div class="content">클릭하고 싶은 영역</div>
  <div class="sticky-bar">고정 요소</div>  <!-- 나중에 오므로 위에 쌓임 -->
</div>

position: sticky가 적용된 요소는 스크롤에 따라 위치가 바뀌면서, 의도치 않게 다른 요소와 시각적으로 겹치는 구간이 생길 수 있다. 이 구간에서는 위에 쌓인 sticky 요소가 클릭을 가로챈다. 사용자 눈에는 아무것도 없는 것처럼 보이는 자리인데도.

먼저 떠올리기 쉬운 방법들

`stopPropagation`

클릭 이벤트가 부모 요소로 전파되지 않도록 막는다. 부모-자식 관계에서의 충돌에는 효과적이지만, 형제 요소가 위에서 덮고 있는 상황은 해결하지 못한다. 이벤트 자체가 아예 아래 요소에 도달하지 않기 때문이다.

콘텐츠 영역에 `z-index` 올리기

css

.content {
  position: relative;
  z-index: 1;
}

겹치는 구간에서 클릭을 살릴 수는 있다. 하지만 z-index는 주변 요소에 연쇄적으로 영향을 줄 수 있어서, 다른 레이어 구조가 무너지거나 예상치 못한 부작용이 생기기 쉽다.

근본적인 해결: DOM 순서와 시각 순서 분리

flex 레이아웃을 사용하고 있다면 order 속성을 활용할 수 있다. 화면에 보이는 순서는 그대로 두고, DOM 안에서의 순서만 바꾸는 것이다.

sticky 요소를 DOM에서 먼저 두면, 브라우저 렌더링 기준으로 콘텐츠가 나중에 그려져 위에 쌓힌다. order로 시각적 위치만 원래대로 되돌리면 된다.

HTML + CSS

<div class="container">
  <div class="sticky-bar"></div>
  <div class="content"></div>
</div>

.container {
  display: flex;
}
.sticky-bar {
  order: 2;
  flex-shrink: 0;
}
.content {
  order: 1;
  min-width: 0; /* flex 환경에서 콘텐츠 영역 축소 방지 */
}

React — 인라인 스타일

function Layout() {
  return (
    <div style={{ display: 'flex' }}>
      {/* DOM에서 sticky 요소를 먼저 두되, order로 시각적 위치 조정 */}
      <StickyBar style={{ order: 2, flexShrink: 0 }} />
      {/* 콘텐츠는 DOM에서 나중에 오므로 위에 쌓임 */}
      <Content style={{ order: 1, minWidth: 0 }} />
    </div>
  );
}

React — styled-components / Emotion

const Container = styled.div`
  display: flex;
`;

const StickyBar = styled.div`
  order: 2;
  flex-shrink: 0;
`;

const Content = styled.div`
  order: 1;
  min-width: 0;
`;

function Layout() {
  return (
    <Container>
      <StickyBar />
      <Content />
    </Container>
  );
}

React — Tailwind

function Layout() {
  return (
    <div className="flex">
      <div className="order-2 shrink-0">{/* StickyBar */}</div>
      <div className="order-1 min-w-0">{/* Content */}</div>
    </div>
  );
}

추가 보완

sticky 요소가 숨겨지거나 접히는 상태가 있다면, 투명해진 레이어가 여전히 클릭을 막을 수 있다. 이때는 pointer-events: none으로 명시적으로 비활성화한다.

.sticky-bar.hidden {
  pointer-events: none;
}

정리

방법	언제 유효한가	한계
`stopPropagation`	부모-자식 이벤트 충돌	형제 요소가 위에 덮인 경우엔 무효
콘텐츠에 `z-index`	빠른 임시 해결	다른 레이어에 연쇄 영향 가능
DOM 순서 변경 + `order`	flex 레이아웃 환경	flex가 아닌 레이아웃엔 적용 불가

한 줄 요약

sticky 요소와 콘텐츠가 겹쳐서 클릭이 막힌다면, z-index보다 DOM 순서를 바꾸고 order로 시각 순서를 유지하는 것이 더 안전한 해결책이다.

20:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$28"}}],["$","$22",null,{"fallback":null,"children":["$","$L29",null,{"postId":22,"slug":"sticky-요소가-아래-콘텐츠-클릭을-막을-때","categorySlug":"회사"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L2a",null,{"href":"/blog/category/회사"}],["$","section",null,{"className":"relative mb-12 mt-0 px-4 py-8 sm:px-6 md:rounded-2xl md:px-8 md:overflow-hidden md:border md:border-[#ff9a3c]/20 md:bg-gradient-to-br md:from-[#2a1545]/90 md:via-[#1c0e38]/85 md:to-[#12082a]/80 md:shadow-[0_0_32px_rgba(255,154,60,0.1)] dark:md:border-[#3de8ff]/[0.15] dark:md:from-[#0a0618]/90 dark:md:via-[#070414]/90 dark:md:to-[#000008]/85 dark:md:shadow-[0_0_32px_rgba(61,232,255,0.08)]","children":[["$","div",null,{"className":"pointer-events-none absolute inset-0 z-0 hidden md:block","children":["$","div",null,{"className":"h-full w-full bg-gradient-to-tr from-[#8a4a68]/15 via-[#1c0e38]/20 to-[#ffc090]/10 blur-[2px] dark:from-cyan-900/20 dark:via-fuchsia-900/10 dark:to-cyan-800/10"}]}],["$","h1",null,{"className":"relative z-10 mb-4 text-3xl font-extrabold md:drop-shadow-sm dark:md:drop-shadow-[0_2px_8px_#7dd3fc55] text-[#ffe8d0] dark:text-[#c8e8ff]","children":"sticky 요소가 아래 콘텐츠 클릭을 막을 때"}],["$","div",null,{"className":"relative z-10 mb-6 flex items-center gap-3 text-xs text-[#d4a8c0]/85 dark:text-[#7ec8ff]/75","children":[["$","span",null,{"className":"font-mono","children":"성창수"}],["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"children":"2026-03-19"}],[["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"className":"text-[#ffb870] dark:text-[#3de8ff]","children":"회사"}]]]}],false,["$","div",null,{"className":"relative z-10 mb-2 min-h-[88px] p-2","children":["$","$22",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],["$","$L2b",null,{"post":{"id":22,"title":"sticky 요소가 아래 콘텐츠 클릭을 막을 때","content":"$2c","updatedAt":"$D2026-08-17T12:40:52.972Z"}}]]}]}],"$L2d"]}],"$L2e"]}]] 23:null 27:[["$","title","0",{"children":"sticky 요소가 아래 콘텐츠 클릭을 막을 때"}],["$","meta","1",{"name":"description","content":"증상position: sticky로 고정된 요소가 있는 레이아웃에서, 스크롤 후 특정 영역을 클릭했는데 아무 반응이 없는 경험을 한 적 있을 것이다. 클릭한 것 같은데 동작하지 않거나, 엉뚱한 곳의 이벤트가 발생하는 경우다.원인은 이벤트 처리가 아니라 렌더링 순서에 있을 가능성이..."}],["$","meta","2",{"name":"author","content":"성창수"}],["$","meta","3",{"name":"creator","content":"3D Blog"}],["$","meta","4",{"name":"publisher","content":"3D Blog"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/sticky-%EC%9A%94%EC%86%8C%EA%B0%80-%EC%95%84%EB%9E%98-%EC%BD%98%ED%85%90%EC%B8%A0-%ED%81%B4%EB%A6%AD%EC%9D%84-%EB%A7%89%EC%9D%84-%EB%95%8C"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"sticky 요소가 아래 콘텐츠 클릭을 막을 때"}],["$","meta","10",{"property":"og:description","content":"증상position: sticky로 고정된 요소가 있는 레이아웃에서, 스크롤 후 특정 영역을 클릭했는데 아무 반응이 없는 경험을 한 적 있을 것이다. 클릭한 것 같은데 동작하지 않거나, 엉뚱한 곳의 이벤트가 발생하는 경우다.원인은 이벤트 처리가 아니라 렌더링 순서에 있을 가능성이..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/sticky-%EC%9A%94%EC%86%8C%EA%B0%80-%EC%95%84%EB%9E%98-%EC%BD%98%ED%85%90%EC%B8%A0-%ED%81%B4%EB%A6%AD%EC%9D%84-%EB%A7%89%EC%9D%84-%EB%95%8C"}],["$","meta","12",{"property":"og:site_name","content":"3D Blog"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/sticky-%EC%9A%94%EC%86%8C%EA%B0%80-%EC%95%84%EB%9E%98-%EC%BD%98%ED%85%90%EC%B8%A0-%ED%81%B4%EB%A6%AD%EC%9D%84-%EB%A7%89%EC%9D%84-%EB%95%8C/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"3D Blog Post"}],["$","meta","19",{"property":"og:type","content":"article"}],["$","meta","20",{"property":"article:published_time","content":"2026-03-19T23:37:45.854Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T12:40:52.972Z"}],["$","meta","22",{"property":"article:author","content":"성창수"}],["$","meta","23",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","24",{"name":"twitter:creator","content":"성창수"}],["$","meta","25",{"name":"twitter:title","content":"sticky 요소가 아래 콘텐츠 클릭을 막을 때"}],["$","meta","26",{"name":"twitter:description","content":"증상position: sticky로 고정된 요소가 있는 레이아웃에서, 스크롤 후 특정 영역을 클릭했는데 아무 반응이 없는 경험을 한 적 있을 것이다. 클릭한 것 같은데 동작하지 않거나, 엉뚱한 곳의 이벤트가 발생하는 경우다.원인은 이벤트 처리가 아니라 렌더링 순서에 있을 가능성이..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/%ED%9A%8C%EC%82%AC/post/sticky-%EC%9A%94%EC%86%8C%EA%B0%80-%EC%95%84%EB%9E%98-%EC%BD%98%ED%85%90%EC%B8%A0-%ED%81%B4%EB%A6%AD%EC%9D%84-%EB%A7%89%EC%9D%84-%EB%95%8C/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],["$","meta","30",{"name":"twitter:image:width","content":"1200"}],["$","meta","31",{"name":"twitter:image:height","content":"630"}],["$","link","32",{"rel":"icon","href":"/favicon.ico?favicon.43c1ha936bzt6.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L2f","33",{}]]

증상

sticky 요소가 아래 콘텐츠 클릭을 막을 때

댓글