feat(blog): z-index가 안 올라오는 진짜 이유 — 쌓임 맥락 완전 정복 (#45)#129
Merged
Conversation
- 부모의 opacity가 새 쌓임 맥락을 만들어 자식 z-index가 갇히는 함정을 설명 - 새 맥락을 만드는 속성 목록과 isolation: isolate 정공법, 버그 추적 순서 정리 - 순수 CSS 데모 3개(정상/함정/isolate)를 Playwright로 렌더링해 실제 스크린샷 첨부
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
- MDN 대조 리뷰에서 누락 확인된 컨테이너 쿼리(container-type) 조건 보강
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
개요
이슈 #45 를 블로그 포스트로 작성했습니다.
frontend시리즈에 추가됩니다.apps/blog/src/app/(main)/posts/frontend/css-stacking-context/page.mdx/posts/frontend/css-stacking-context다루는 내용
z-index를 크게 줘도 안 올라오는 현상을 쌓임 맥락(stacking context)으로 설명opacity < 1이 새 맥락을 만들어 자식z-index가 갇히는 함정 (예제 1 정상 → 예제 2 뒤집힘)transform,filter,position: fixed/sticky등)isolation: isolate로 부작용 없이 맥락을 의도적으로 만드는 정공법 (예제 3)시각 자료
기존
playground/stacking-context예제와 동일한 개념을, 읽기 쉬운 순수 HTML/CSS로 재현했습니다. 부모가 맥락을 만들고 자식에z-index를 주는 구조를 그대로 유지했습니다.apps/blog/public/stacking-context-ex{1,2,3}.pngalt텍스트 작성검증
pnpm --filter blog run build성공 —/posts/frontend/css-stacking-context정적 생성 확인Closes #45