튜토리얼
Claude Opus 5.5로 헤더 뒤에 가려진 상품 메뉴 수정하기
z-index: 9999인 상품 메뉴도 헤더 뒤에 가려질 수 있습니다.
Panelly로 직접 만들어 보세요
아이디어를 내 상품 광고로
상품 사진과 아이디어로 시작하세요. Panelly에서 네 컷 광고, 통일된 소재 세트, 영상을 만들 수 있어요.
Panelly에서 만들기 요청을 먼저 수정하고 생성하세요.
z-index: 9999인 상품 메뉴도 헤더 뒤에 가려질 수 있습니다. Claude Opus 5.5에 메뉴의 조상 스타일과 겹치는 요소를 제공하고, 패치 전에 쌓임 경계를 찾도록 요청하세요. 자식의 숫자를 올려도 부모의 쌓임 맥락을 벗어나지는 못합니다.
비슷한 증상 구분하기
2013년 커뮤니티 질문은 어떤 속성이 쌓임 맥락을 만드는지 묻습니다. 현재 규칙은 MDN 쌓임 맥락 안내를 참고하세요. 변환, 1보다 작은 불투명도, 특정 위치 지정과 z-index 조합 등이 해당합니다. position: relative만으로 항상 새 맥락이 생기지는 않습니다.
| 증상 | 수집할 증거 | 첫 수정 방향 |
|---|---|---|
| 형제 헤더 아래에 메뉴 표시 | 조상 맥락과 형제 순서 | 관련 부모 계층 수정 |
| 카드 가장자리에서 메뉴 잘림 | overflow와 잘림 스타일 | 잘림을 별도로 처리 |
| 고정 메뉴가 변환된 카드와 이동 | 포함 블록과 경계 사각형 | 위치 지정과 조상 재검토 |
| 대화상자가 일반 콘텐츠 위에 유지 | 브라우저 최상위 레이어 사용 여부 | 별도 계층 모델 존중 |
두 부모로 계산하기
위치가 지정된 카드의 z-index가 1, 형제 헤더가 2, 카드 안 메뉴가 9999라고 가정합니다. 설명용 경로 [1, 9999]와 [2]를 보면 첫 경계에서 헤더가 앞섭니다. 9999를 999999로 바꿔도 결과는 같습니다. 로컬 숫자 예제는 이 단순화한 순서만 확인했습니다. 전체 CSS 그리기 알고리즘의 브라우저 구현이나 Opus 수정 실측이 아닙니다.
먼저 카드에 독립 맥락이 필요한지 판단하세요. 불필요한 원인을 제거할 때도 시각 효과와 배치를 확인해야 합니다. 메뉴가 경계를 넘어야 한다면 적절한 공통 레이어에 배치하는 방안을 검토하세요. Portal은 DOM 위치를 바꾸지만 좌표, 잘림, 이벤트, 초점을 자동으로 해결하지 않습니다. 트리거의 접근 가능한 이름을 유지하고 이동 후 열기·닫기와 키보드 동작을 다시 검증하세요.
증거부터 확인하는 수정 프롬프트
상품 메뉴, 트리거, 문서 루트까지의 모든 조상과 겹치는 헤더를 검사하세요. DOM, 계산된 position/z-index/transform/opacity/overflow 값과 경계 사각형을 제공합니다.
쌓임, 잘림, 포함 블록 문제를 분리하세요. 첫 관련 경계를 찾고 실제 조상 체인으로 수정안을 설명하세요. 모든 z-index를 올리거나 모든 변환을 제거하지 마세요.
배치, 애니메이션, 접근 가능한 이름을 보존하는 최소 패치를 반환하세요. 오버레이를 옮긴다면 좌표 갱신, 스크롤, 이벤트 처리, 초점 복원을 명시하세요. 좁고 넓은 화면, 확대, 스크롤, 키보드 열기·닫기, 반복 마운트를 테스트하세요. 실행하지 않은 검사는 대기로 표시하고 증거 없이 브라우저 수정 성공을 주장하지 마세요.이 흐름은 공식 Opus 프롬프트 안내를 참고한 제안이며 실행한 모델 벤치마크가 아닙니다.
실제 경계에서 검수하기
수정 전후에 같은 메뉴 상태를 캡처하세요. 의도한 메뉴가 보이고 다른 콘텐츠 순서가 유지되며 스크롤 중에도 정렬되는지 확인하세요. 레이어 비교가 통과해도 잘림은 별도로 검사합니다. 브라우저, 화면 크기, 실제 키보드 결과를 기록하세요.
**모든 오버레이에 가장 큰 숫자를 써야 하나요?** 아니요. 숫자는 해당 맥락 안에서 의미가 있습니다. **body로 옮기면 무조건 해결되나요?** 아니요. 위치와 상호작용 검증이 필요합니다. 모달 동작은 별도의 대화상자 초점 안내를 참고하세요.
상품 표시가 정상화되면 Panelly Studio에서 연계 캠페인 이미지를 만들 수 있습니다. Panelly의 Opus 통합이나 CSS 자동 수정을 주장하지 않습니다.
