React デモでのボタンのクリックが反応しません

Question

ボタンをクリックしても反応がないのはなぜですか?

私のサンプルコード: https://codesandbox.io/s/gallant-knuth-kwf55c

コードをチェックしましたが、問題は見つかりませんでした。解決を手伝ってください。

Answer 1

理由は、すべての要素が position:absolute を使用して設定されているため、コンテンツ div がヘッダーと重なっているためです。

これにより、対話時にヘッダーが非表示になります。したがって、クリックすると、実際にはボタンではなくコンテンツに対してクリック イベントが発生します (以下を参照)。

次の方法が考えられます:

• DIV からposition:absolute
を削除します
• CSS の使用 ビューポート単位 / calc 関数はフッターとの重なりを避けるためにコンテンツの高さを計算します