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仅适用于设置了位置的元素。