CSS 조건부 속성 정리

1. position이 static이 아닐 때만 동작하는 속성

즉, relative, absolute, fixed, sticky일 때만 유효함

속성	설명
top, right, bottom, left	위치 지정, position: static이면 무시됨
z-index	stacking 순서 지정, static이면 무시됨
inset	top, right, bottom, left를 한번에 쓰는 shorthand
transform	시각적으로는 작동하지만, position이 static이면 예상과 다르게 동작할 수 있음 (예: sticky와 함께 쓸 때)

---

2. overflow가 visible이 아닐 때만 동작하는 속성

속성	설명
scrollbar-*	스크롤바 제어 (scrollbar-width, scrollbar-color 등)
clip-path	잘리는 영역을 지정하지만, 실제 잘림은 overflow: hidden 같은 것이 있어야 확실히 작동함

---

3. display가 특정 상태일 때만 유효한 속성

속성	조건 및 설명
flex, grid, inline-flex, inline-grid 등일 때만 작동
flex-direction, align-items, justify-content, gap, row-gap, column-gap	→ display: flex 또는 grid일 때만 동작
grid-template-*, grid-auto-*, place-items, place-content 등	→ display: grid 또는 inline-grid일 때만 동작

---

4. table 관련 display에서만 작동하는 속성

속성	조건
border-collapse, caption-side, table-layout	display: table일 때만 의미 있음
vertical-align	table-cell이나 inline 요소에서만 효과 있음

---

5. transform이 있어야 동작하는 속성들 (stacking context/3D)

속성	조건
transform-style: preserve-3d	부모에 transform이 있어야 의미 있음
backface-visibility	transform 3D 회전 등과 함께 써야 의미 있음
perspective, perspective-origin	3D transform 효과에만 적용됨

---

6. position: sticky는 부모 요소에 따라 동작 조건이 있음

조건	설명
overflow가 visible이 아닌 조상 요소가 있으면 sticky가 무시됨
top, left 등 기준이 설정되지 않으면 동작 안 함

---

7. contain, will-change 등으로 생성된 stacking context가 있어야 시각적으로 적용되는 것들

속성	조건
z-index 우선순위 영향	새로운 stacking context 안에서는 다른 context 요소들과 z-index 비교 불가
filter, opacity (<1) 등도 stacking context 생성	의도하지 않은 레이어 충돌을 유발할 수 있음

---

8. visibility, opacity, pointer-events의 특이점

속성	조건
visibility: hidden	요소는 자리 차지하지만 보이지 않음. 내부 요소도 모두 안 보임
opacity: 0	완전히 투명하지만 이벤트는 받음
pointer-events: none	투명한 요소를 클릭할 수 없게 됨. 부모 요소에 따라 영향 있음

---

주의 깊게 체크해야 할 예시 요약

조건	영향 받는 속성들
position이 static	top/right/bottom/left, z-index 무시됨
display가 flex/grid/table	관련 레이아웃 속성 무시됨
stacking context 내부	z-index 비교 제한됨
overflow가 hidden 아님	자식의 잘림 효과 미작동
sticky 동작 제한	부모의 overflow나 height 설정 영향 받음