Button click in my React demo is unresponsive

Question

Why is there no response after clicking the button?

My sample code: https://codesandbox.io/s/gallant-knuth-kwf55c

I checked my code and found no problem. Please help me solve it.

Answer 1

The reason is that since all elements are set using position:absolute, the content div overlaps the header.

This results in the header being hidden when interacting. So when we click, the click event is actually fired on the content, not the button (see below).

We can take the following methods:

• Either remove position:absolute
from the DIV
• Using CSS Viewport Units / calc Functions calculate the height of content to avoid overlapping with the footer