노트

쌓임 순서와 z-index

Stacking Order

프런트엔드#css · 연결된 개념 3개

쉽게 말하면

쌓임 순서는 겹친 요소 중 무엇이 위에 보일지 정하는 규칙이에요. 책상 위 서류 묶음처럼, 묶음 안에서 종이 순서를 바꿔도 묶음 자체가 아래 있으면 다른 묶음 위로 올라오지 못하죠.

비유가 깨지는 곳 z-index를 안 줘도 순서는 정해져 있어요. position이 붙은 요소가 없는 형제보다 위에 그려지고, opacity나 transform만으로도 새 쌓임 맥락이 생겨요. 이럴 땐 포털로 DOM 위치를 옮겨요.

요소가 겹칠 때 무엇이 위에 보일지 정하는 규칙. z-index가 없을 때도 정해진 기본 순서가 있고, z-index는 같은 쌓임 맥락(Stacking Context) 안에서만 비교된다.

z-index가 없을 때(아래에서 위로)

  1. 루트 요소의 배경과 테두리
  2. position이 없는 블록 자식들, HTML에 나온 순서대로
  3. position이 지정된 자식들, HTML에 나온 순서대로

그래서 HTML에서 먼저 나왔더라도 position: relative가 붙은 요소는 position이 없는 형제보다 위에 그려진다.

쌓임 맥락

  • position과 z-index(auto 아님)를 함께 준 요소, opacity가 1 미만인 요소, transform·filter가 있는 요소, flex·grid 아이템에 z-index를 준 경우 등이 새 쌓임 맥락을 만든다
  • 자식의 z-index는 그 맥락 안에서만 의미가 있다. 부모 맥락이 형제보다 아래에 있으면 자식 z-index: 9999도 형제를 넘지 못한다. "z-index를 올려도 안 올라간다"의 대부분이 이 경우다
  • 모달이나 툴팁이 이 문제로 가려지면 DOM 위치 자체를 body 아래로 옮기는 포털로 푼다. transform이 쌓임 맥락을 만든다는 점은 합성 단계와 transform·opacity을 위해 transform을 쓸 때도 기억해 둔다

출처: MDN — Stacking without the z-index property · MDN — Stacking context

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • CSS 명시도

    캐스케이드에서 레이어까지 비겼을 때, 선택자가 요소를 얼마나 구체적으로 가리키는지로 승부를 내는 점수. (A, B, C) 세 자리로 매기고 앞자리부터 비교한다.

  • 속성 선택자와 형제 선택자

    대괄호 []로 HTML 속성을 기준으로 요소를 고르는 선택자와, +·~로 형제 관계를 따라 고르는 선택자. CSS뿐 아니라 querySelectorAll에서도 똑같이 쓴다.

  • CSS @layer

    CSS 규칙을 이름 붙인 묶음(레이어)으로 나누고, 묶음 사이의 우선순위를 명시적으로 정하는 기능. CSS Cascade Level 5 명세에서 캐스케이드에 새 단계로 들어왔고, 명시도보다 먼저 평가된다.

  • SEO

    SEO(Search Engine Optimization)는 검색 엔진이 페이지를 잘 찾고(크롤링, crawling), 이해해서 저장하고(색인, indexing), 알맞은 검색어로 노출하도록(순위, ranking) 사이트를 다듬는 일이다. 개발자가 맡는 부분은 대부분 앞의 두 단계, 즉 "검색 엔진이 읽을 수 있게 만드는 것"이다.

  • DB 인덱스와 트레이드오프

    DB 인덱스는 특정 컬럼 값으로 행을 빨리 찾도록 테이블 옆에 따로 유지하는 보조 자료구조(auxiliary data structure)다. 관계형 DB의 기본 인덱스는 정렬된 균형 트리(B-tree 계열)라서, 전체를 훑지 않고 트리를 따라 내려가 원하는 행에 닿는다.

보기 옵션