겹침 순서 (z-index)
z-index (Stacking Order)
상자들이 겹칠 때 어떤 게 위로 올라올지 정하는 번호예요.
💡 책상 위에 쌓인 종이 중 맨 위에 있는 게 보이는 것과 같아요.
👆 직접 눌러 보기
진짜로 동작해요. 눌러 보고 움직여 보세요.
파랑
보라
CSS.보라 { z-index: 10; } .파랑 { z-index: 1; }
🤖 AI에게 이렇게 말해 보세요
드롭다운 메뉴가 아래 카드에 가려져. 드롭다운의 겹침 순서(z-index)를 높여서 항상 맨 위에 보이게 해 줘.
핵심은 ‘z-index (Stacking Order)’라는 단어예요. 이 단어를 넣으면 AI가 훨씬 정확하게 알아들어요.
📌 알아 두면 좋아요
'뭔가가 뒤에 숨었어요', '가려져요'라는 문제는 대부분 z-index 문제예요.
이럴 때 써요
- 모달이나 드롭다운이 다른 것 뒤에 숨어 버릴 때
- 고정 헤더 위로 내용이 지나갈 때
이렇게도 불러요: 겹침, 위로 올리기, 가려져요, 뒤에 숨음, 레이어, 앞으로 가져오기, zindex