린캔버스 프로젝트 공부중에 z인덱스 값.

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

작성

선생님 린캔버스 프로젝트를 따라서 공부하고 있는데요.

해더부분에 햄버거 버튼을 클릭하면 나오는 aside 메뉴가 z-9999를 줬는데요

홈에 있는 돋보기가 더 위에서 노출되서요. 홈에 있는 서치 아이콘은 z-0으로 줬거든요

제가 뭘 잘못하고 있을까요 ㅠ

답변 1

지식공유자

안녕하세요 🙂

이런 경우 확인해볼 사항들은 다음과 같습니다:

z-index는 위치 지정 컨텍스트(positioning context)에서만 작동합니다. aside 메뉴에 position: relative, position: absolute, 또는 position: fixed 속성이 적용되어 있는지 확인해보세요.
부모 요소의 z-index도 확인해보세요. 자식 요소의 z-index가 아무리 높아도 부모 요소의 z-index가 낮으면 다른 요소보다 위에 표시될 수 없습니다.
돋보기 버튼의 부모 요소가 aside 메뉴의 부모 요소보다 DOM 구조상 나중에 위치한다면, 같은 z-index 값을 가질 경우 나중에 렌더링된 요소가 위에 표시됩니다.

코드를 확인하려면 다음과 같은 부분들을 체크해보세요:

위 사항을 확인해 보시겠어요~?

질문자

선생님 확인을 해봤구요 ㅠㅠ 여전히 서치바 자체가 사이드메뉴보다 위에 노출이 됩니다 ㅠ z인덱스 값도 확인했구요 포지션도 확인했는데도 그럽니다 ㅠㅠ 뷰토글버튼이랑 위치를 바꿔봐도 서치바에서만 z- 인덱스값이 문제가 발생합니다.

인프런 커뮤니티 질문&답변