PF-002
ボタンが押せない（クリックが効かない）→ 重なり（z-index）を切り分けて修正
課題（症状）
- 見た目はボタンが表示されているのに、クリック（タップ）しても反応しない。
- PCではたまに押せるが、スマホだと押せない…など環境差が出ることもある。
Before / After（この場で体験）
サンプルサイト表示エリア（ここで挙動を確認できます）
モード：Before
Beforeは「ボタンが押せない」状態を再現。Afterは「押せて反応」し、クリックしたら 下に結果が表示 されます。
クリック結果：
（Afterでクリックすると、ここに結果が表示されます）
✅ クリックできました（Afterの状態です）
Before： 透明な要素が上に被さっている（クリックを奪っている）状態を再現しています。
わかりやすく言うと：
ボタン自体は正しく表示されていても、透明な“見えない板”が上に乗っているとクリックできません。
今回は「何が上に被さっているか」を切り分けて、ボタンが押せるように直した例です。
技術メモ（原因の考え方）
- 原因例：装飾レイヤー（疑似要素/背景/固定要素）が前面に来ている（
z-index） - 透明でもクリックは奪う（
pointer-eventsが有効だと上の要素が受け取る） - 切り分け：DevToolsで「押せない位置」をクリックして、上に被さっている要素を特定
- 対策：不要レイヤーに
pointer-events: none／ボタン側を前面に（z-index）
原因（切り分け）
- ボタンの上に透明レイヤーが被さり、クリックがそのレイヤーに吸われていた。
z-indexの優先順位が意図と違い、装飾レイヤーが前面に出ていた。
対応（修正内容）
- 被さっているレイヤーを特定（DevToolsでクリック位置の要素を確認）。
- 不要な装飾レイヤーに
pointer-events: noneを付与。 - ボタン側を前面に（
z-index）してクリックを安定化。
修正コード例（要点）
/* NG：透明レイヤーがクリックを奪う */
.blocker { position:absolute; inset:0; z-index:5; }
/* OK：クリックを奪わない */
.blocker { pointer-events: none; }
/* もしくはボタンを前面へ */
.cta { position: relative; z-index: 10; }結果
- ボタンが確実にクリック（タップ）できるようになった。
- スマホ/PCなど環境差のある「押せない」系トラブルの再発を防止。