린캔버스 프로젝트 공부중에 z인덱스 값.
67
작성한 질문수 1
선생님 린캔버스 프로젝트를 따라서 공부하고 있는데요.
해더부분에 햄버거 버튼을 클릭하면 나오는 aside 메뉴가 z-9999를 줬는데요
홈에 있는 돋보기가 더 위에서 노출되서요. 홈에 있는 서치 아이콘은 z-0으로 줬거든요
제가 뭘 잘못하고 있을까요 ㅠ
답변 1
0
안녕하세요 🙂
이런 경우 확인해볼 사항들은 다음과 같습니다:
z-index는 위치 지정 컨텍스트(positioning context)에서만 작동합니다. aside 메뉴에
position: relative,position: absolute, 또는position: fixed속성이 적용되어 있는지 확인해보세요.부모 요소의 z-index도 확인해보세요. 자식 요소의 z-index가 아무리 높아도 부모 요소의 z-index가 낮으면 다른 요소보다 위에 표시될 수 없습니다.
돋보기 버튼의 부모 요소가 aside 메뉴의 부모 요소보다 DOM 구조상 나중에 위치한다면, 같은 z-index 값을 가질 경우 나중에 렌더링된 요소가 위에 표시됩니다.
코드를 확인하려면 다음과 같은 부분들을 체크해보세요:
aside 메뉴의 CSS에서
position과z-index속성돋보기 버튼의 CSS에서
position과z-index속성두 요소의 부모 컨테이너 관계
위 사항을 확인해 보시겠어요~?
0
선생님 확인을 해봤구요 ㅠㅠ 여전히 서치바 자체가 사이드메뉴보다 위에 노출이 됩니다 ㅠ z인덱스 값도 확인했구요 포지션도 확인했는데도 그럽니다 ㅠㅠ 뷰토글버튼이랑 위치를 바꿔봐도 서치바에서만 z- 인덱스값이 문제가 발생합니다.
오타?
0
30
1
뭐하나 여쭤봐도 될까요?
0
70
1
안녕하세요 질문이 있습니다.
0
56
2
질문 : 삭제 버튼 아규먼트 (id)
0
50
1
Tailwind 버전 확인
0
63
1
align-items 정렬
0
50
2
vite 명령어로 프로젝트를 만들었습니다. (vscode)
0
79
1
31. 객체 업데이트 하기 - 10:15 질문
1
56
2
강의교안, 내용 인용해서 블로그 글 작성
1
80
2
이미지가 출력되지 않아요
1
76
2
강의와 만들어진 코드가 달라요
0
76
3
AI와 CSS 라이브러리의 궁합
0
97
1
onClick 이벤트에 함수 넘길 때
0
68
1
린캔버스 기능 구현은 왜 못하나요.... 구현하고 싶습니다...
0
101
1
notes 없음 읽기 오류
0
72
1
Object.assign 문법
0
64
1
react-router 전혀 기능 안함
0
54
1
react-router-dom@6.25.1
0
47
1
React Router 최신 스펙
0
209
1
Immer 에서 filter, map 사용
0
55
1
vite 설치에 대해 질문있습니다.
0
76
2
라이브러리 버전 일치 이슈
0
77
1
"Enter 키 발생 시 항목 추가" 부분에서 공백이 포함되면 한 줄이 더 입력됩니다
0
51
2
TotalCounter을 작성할때
0
66
2