Turnstile iframe 蓋住 WordPress admin bar
整理日期：2026-05-05
登入 WordPress 後，前台最上方的 admin bar 點不到。
admin bar 看得到，連結也存在，但滑鼠點下去沒有反應。從前台要回後台變得很不順。
這種問題很容易被誤判成 CSS、z-index 或上次改過 Logo 點擊範圍造成的副作用。
先拆成幾層看
Section titled “先拆成幾層看”我會先拆成幾層：
- admin bar 的連結是否真的存在。
- 是 href 錯，還是 click 被別的元素吃掉。
- 問題只在登入後出現，還是匿名訪客也會遇到。
- 頁面上方是否有透明 iframe、popup、驗證碼或第三方 widget。
- 最近有沒有改 reCAPTCHA、Turnstile、Gravity Forms 或 popup 設定。
只看 HTML 結構不一定夠。這種點不到的問題，要看滑鼠座標最上層到底是哪個元素。
頁面裡有一個 popup 設定成全站載入。
那個 popup 裡放了一個表單，表單使用 Cloudflare Turnstile。雖然 popup 看起來是隱藏的，但 Turnstile 仍然在頁面載入時插入 iframe。
Turnstile iframe 的實際位置跑到頁面左上角附近，剛好蓋住 WordPress admin bar。
所以 admin bar 不是壞掉，而是 click 被 Turnstile iframe 吃掉。
這類問題用 document.elementFromPoint(x, y) 很快可以確認。把座標放在 admin bar 上，回傳的不是 admin bar，而是第三方 iframe 相關元素，就知道方向了。
這次沒有改 WordPress 程式碼。
處理方式是到 Cloudflare Turnstile 後台，把對應 site key 的 widget mode 從可見模式改成 invisible。
改成 invisible 後，不會再渲染可見的 300px 左右 iframe，也就不會蓋住 admin bar。
不過改之前要確認這個 site key 有沒有被其他表單或其他網站共用。共用的話，影響範圍就不只這一個表單。
不建議先做的事
Section titled “不建議先做的事”不要一開始就亂調 admin bar 的 z-index。
如果是第三方 iframe 蓋住，硬把 admin bar 疊上去不一定是乾淨解法，還可能讓其他互動壞掉。
也不要只測匿名訪客。admin bar 只有登入後才看得到，這種問題如果沒有登入測，就很容易漏掉。
下次遇到可以先整理什麼
Section titled “下次遇到可以先整理什麼”- 問題是否只在登入狀態出現。
- 點不到的位置座標。
document.elementFromPoint(x, y)回傳哪個元素。- 頁面是否有 popup、表單、reCAPTCHA、Turnstile 或 hCaptcha。
- popup 是否全站載入。
- 驗證碼 widget 是 visible、managed，還是 invisible。
- site key 是否被其他表單共用。
只要是「看得到但點不到」的問題，我會先查最上層元素，而不是先猜 CSS。
Cloudflare TurnstileGravity FormsPopupadmin bariframe點不到