내 React 데모의 버튼 클릭이 응답하지 않습니다.

Question

버튼을 클릭했는데 왜 반응이 없나요?

내 샘플 코드: https://codesandbox.io/s/gallant-knuth-kwf55c

코드를 확인한 결과 문제가 발견되지 않았습니다. 문제를 해결하도록 도와주세요.

Answer 1

그 이유는 모든 요소가 position:absolute를 사용하여 설정되기 때문에 콘텐츠 div가 헤더와 겹쳐지기 때문입니다.

이로 인해 상호작용 시 헤더가 숨겨집니다. 따라서 클릭하면 클릭 이벤트가 실제로 버튼이 아닌 콘텐츠에서 실행됩니다(아래 참조).

다음 방법을 사용할 수 있습니다.

• DIV
에서 절대 위치를 제거하세요.
• 바닥글과 겹치지 않도록 CSS 뷰포트 단위/calc함수를 사용하여 콘텐츠 높이를 계산하세요