Firefox ブラウザーを使用していれば、誰でもこのフィドルを開くことができます。
私が抱えている問題は、私が持っているこのチェックボックスボタンにあります。それをオフにするには複数回クリックする必要があります。私の質問は、どうすればこれを防ぐことができますか? これが原因であることはわかっていposistion:relativeますが、ボタンをクリックするたびにページの上部に移動しないようにする必要があります。複数回クリックするのではなく、ワンクリックでボタンのオンとオフを切り替えたいだけです
（質問の下のコメントを参照してください-今、私はあなたに何が起こるか知っています）
ああ-Javascriptなしではこれを解決できません.TEXT ITSELFをすばやく（ダブル？）クリックすると、ブラウザによって「テキストの選択」と解釈され、それが発生したときにチェックボックスにイベントが送信されません。Javascriptを使用すると、クリック時にテキストの「選択解除」を強制できます。
ダブルクリックのテキスト選択を避けて「ゆっくり」クリックするとうまくいきます（問題の原因を示すだけで、Javascriptまたは独自のCSSなしでは解決策はありません）。
これを追加してみてください:ダブルクリック後のテキスト選択を防ぐ
CSS だけで実現しようとするのではなく、完全な Javascript Checkbox-Button ソリューションを使用する必要があるかもしれません。