網頁元素穿透問題：輸入框被背景圖片遮擋的 CSS 解決方案

問題描述

登入頁面中，Email 輸入框、密碼框及驗證碼輸入框疊加在背景圖片上，導致滑鼠點擊事件被背景圖層攔截，使用者無法正常聚焦輸入（俗稱「元素穿透」）。

核心解決方案：Z-Index 層級管理

根本原因在於背景圖片容器的 z-index 高於表單元素。解決方法：

.form-container { position: relative; z-index: 10; }
.background-image { position: absolute; z-index: 1; pointer-events: none; /* 關鍵：讓背景不攔截點擊 */ }

進階優化建議

1. 驗證時機調整：Email 格式錯誤提示應在 onblur (失去焦點) 時觸發，而非輸入過程中，減少干擾。
2. 密碼顯示切換圖示：若為瀏覽器原生眼睛圖示，需檢查 -webkit-text-security 樣式；若為自訂圖片，同樣透過 z-index 置於輸入框上層。
3. 語意化結構：將標籤、輸入框、提示訊息包裹在同一 .form-group 內，利用 Flexbox 排版避免定位錯亂。

總結

元素穿透本質是堆疊上下文與點擊事件穿透問題，善用 z-index 與 pointer-events: none 即可徹底解決，並配合合理的驗證交互提升使用者體驗。