z-index · visibility · empty-cells 완전 정리 — 요소 겹치기와 숨기기

 

 

Web Development · CSS Layer & Visibility

z-index · visibility · empty-cells
완전 정리

요소를 겹치고, 숨기고, 빈 셀을 처리하는 세 가지 핵심 속성

시작 이 글에서 다루는 세 가지 문제

화면을 만들다 보면 늘 마주치는 세 가지 문제가 있다. (1) 요소가 겹쳤을 때 누가 위에 올지 결정하는 문제(z-index) — 모달·드롭다운·툴팁의 핵심. (2) 요소를 숨기되 자리를 비워둘지/없앨지 결정하는 문제(visibility vs display). (3) 표 안의 빈 셀을 보여줄지/숨길지 결정하는 문제(empty-cells). 모두 짧지만 확실히 알아두면 레이아웃이 한결 깔끔해진다.

용어 핵심 키워드

position요소 배치 방식 (static/relative/absolute/fixed/sticky)

z-index겹침 순서 — 숫자 클수록 위

stacking contextz-index가 비교되는 "쌓임 맥락"

visibility: hidden보이지 않지만 자리는 차지

display: none렌더링 자체에서 제외 (자리도 사라짐)

opacity: 0투명하지만 자리·이벤트 모두 살아있음

empty-cells빈 td의 테두리·배경 표시 여부

absolute가장 가까운 position 부모 기준 절대 배치

---

1 z-index — 요소 쌓임 순서

z-index의 동작 원리

z-index는 화면을 위에서 내려다본 깊이감(z축) 순서다. 숫자가 클수록 위에 올라간다. 단, 한 가지 중요한 조건이 있다 — position 속성이 static이 아니어야 동작한다(즉 relative, absolute, fixed, sticky 중 하나).

div#wrapper { position: relative; /* absolute 자식의 기준점 */ } .box { position: absolute; /* 절대 위치 */ width: 100px; height: 100px; } #b1 { background: red; z-index: 1; } #b2 { background: yellow; z-index: 3; } /* 가장 위 */ #b3 { background: blue; z-index: 1; } /* 동률이면 나중에 작성한 게 위 */

실제 결과 — 노란 박스(z:3)가 가장 위

1

2

3

※ z-index를 쓸 때 꼭 기억할 것

• position: static(기본값)에서는 z-index가 무시된다
• 같은 z-index끼리는 HTML에서 나중에 작성된 요소가 위
• z-index는 보통 relative인 부모 안의 absolute 자식들 사이의 순서
• 음수(z-index: -1)도 가능 — 부모 뒤로 보냄

---

2 position 5종류 정리

값	의미	특징
static	기본 (문서 흐름대로)	top/left/z-index 모두 무시
relative	원래 자리 기준 살짝 이동	자리는 차지함, absolute 자식의 기준이 됨
absolute	가장 가까운 position 부모 기준	문서 흐름에서 빠짐
fixed	뷰포트 기준 고정	스크롤해도 따라옴 (헤더 고정 등)
sticky	특정 위치 도달하면 고정	스크롤 시 일정 위치까지는 따라가다 멈춤

💡 가장 흔한 패턴: 부모는 relative(자리는 그대로), 자식은 absolute(부모 안에서 자유 배치). 이 조합이 모달·툴팁·드롭다운의 기본이다.

---

반응형

3 visibility: hidden — 숨기되 자리 유지

.invisible { visibility: hidden; }

<img src="pic1.jpg"> <img src="pic2.jpg" class="invisible"> <!-- 안 보이지만 자리는 있음 --> <img src="pic3.jpg">

visibility: hidden — 가운데 자리는 비워둔 채 사라짐

PIC 1

PIC 2

PIC 3

display: none — 자리까지 사라짐 (PIC 1 옆에 PIC 3가 바로 붙음)

PIC 1

PIC 2

PIC 3

visibility: hidden

• 요소가 안 보이지만 자리는 차지
• 레이아웃이 변하지 않음
• 마우스 클릭 안 됨
• 예: 동적으로 잠시 숨겼다 다시 보일 때

display: none

• 요소가 완전히 사라짐 (자리도 없음)
• 다른 요소들이 자리를 채움
• 화면 리플로우 발생
• 예: 탭 전환·메뉴 토글

※ 세 가지 숨기기 방법 비교

• visibility: hidden — 안 보임 + 자리 ○ + 클릭 ×
• display: none — 안 보임 + 자리 × + 클릭 ×
• opacity: 0 — 안 보임 + 자리 ○ + 클릭 ○ (이벤트 살아있음)

---

4 empty-cells — 표의 빈 셀 처리

표를 만들다 보면 데이터가 없는 셀이 생기는 경우가 있다(예: 일정표의 미정 칸). 이 빈 셀의 테두리와 배경을 그릴지 말지를 결정하는 속성이다.

#tb1 td { empty-cells: show; } /* 빈 셀도 테두리 표시 (기본) */ #tb2 td { empty-cells: hide; } /* 빈 셀은 테두리 숨김 */

empty-cells: show (왼쪽) vs hide (오른쪽)

울산	vs 인천	TV
부산	vs 대전
서울	vs 강원

울산	vs 인천	TV
부산	vs 대전
서울	vs 강원

⚠️ empty-cells는 border-collapse: separate일 때만 동작한다. collapse로 병합된 표에서는 빈 셀과 인접 셀이 하나로 합쳐져서 무의미해진다.

---

5 자주 하는 실수

실수	증상	해결
z-index가 적용 안 됨	겹침 순서 안 바뀜	position 속성 부여 (relative 등)
z-index 값을 너무 크게(9999) 남발	나중에 충돌·관리 어려움	0/1/10/100 단위로 계층화
display:none으로 숨겼는데 애니메이션 안 됨	display는 transition 대상이 아님	opacity + visibility 조합 사용
visibility:hidden 했는데 클릭 됨	자식이 visible로 덮어쓴 경우	자식까지 일괄 hidden 또는 display:none
empty-cells:hide 안 먹힘	border-collapse:collapse 상태	separate로 변경
absolute 자식이 화면 끝으로 튐	가까운 position 조상이 없음	부모에 position: relative 추가

---

요약 핵심 한 줄 정리

z-index · visibility · empty-cells

z-index숫자 클수록 위 — position이 static이 아니어야 동작

position: relative자리 유지 + absolute 자식의 기준점

position: absolute가장 가까운 position 조상 기준 자유 배치

visibility: hidden보이지 않음 + 자리 유지

display: none완전히 사라짐 + 자리도 없어짐

opacity: 0투명 + 자리 + 이벤트 모두 살아있음

empty-cells: hide빈 td의 테두리·배경 숨김 (separate 필수)

Tags

#z-index #position #absolute #relative #visibility #display #opacity #empty-cells #요소숨기기 #CSS레이어 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

z-index, position, absolute, relative, visibility, display, opacity, empty-cells, 요소숨기기, CSS레이어, 웹개발, 티스토리