Jquery淡入淡出/覆蓋覆蓋輸入框：輸入字段位於覆蓋層頂部，直到動畫完成

Question

我有一個大的覆蓋層，在提交後淡入表單頂部，給出整個表單的效果「灰色漸變「，並且文本框變得鎖定（至少表面上）。但是，輸入字段似乎位於疊加層之上，直到動畫結束後，然後立即在覆蓋層下面彈出。因此，不是文本框逐漸變爲灰色（就像它們周圍的區域一樣），它們的對比度在動畫結束時立即發生變化（測試時疊加層衰減超過10秒）。

這是一個已知的錯誤嗎？ z級別設置正確，所以我不知道什麼可能會導致這個問題...

編輯：我不認爲我真的可以舉一個例子沒有粘貼我的整個代碼，但一個非常奇怪的觀察是，如果我禁用所有輸入框的jq_watermark插件，其中一個是固定的，並且行爲正常，但其餘的仍然是錯誤的。我已經剝去了他們所有的CSS樣式，但仍然都是這樣的。很奇怪。

Answer 1

聽起來有點像stacking context問題。在元素上設置position或opacity < 1將其置於新的堆棧上下文中。這意味着它在淡入淡出時可能會有不同的堆棧上下文，因爲opacity小於1，或者因爲jquery在運行動畫時更改position，並在完成時將其更改回去。很難說，雖然沒有看到它自己。

事情嘗試：

• 變化的疊加與源代碼的形式元素的順序。
• 用position:relative將覆蓋層包裹在div中。
• 淡入0.9而不是完全爲了看到這是一個由opacity < 1引起的堆棧上下文問題，或者如果它是由jquery設置position引起的。
• 確保您使用的所有元素z-index都使用position定位。 z-index僅適用於設置了位置的元素。