入力ボックスを覆うオーバーレイのJQueryフェードイン/アウト：アニメーションが完了するまでオーバーレイの上に入力フィールドが表示されます

Question

フォームが送信された後にフェードインする大きなオーバーレイがあり、グレー表示 "、およびテキストボックスが（少なくとも表面的に）ロックされます。ただし、入力フィールドは、アニメーションが終了するまでオーバレイの上に座っているように見え、オーバーレイのすぐ下にポップバックします。したがって、テキストボックスが徐々にグレー表示されるのではなく（周囲の領域のように）、そのコントラストはアニメーションの最後に即座に変化します（10秒を超えるオーバーレイフェードでテストされます）。

これは既知のバグですか？ zレベルは正しく設定されているので、何が原因で問題が発生するのかはわかりません...

編集：コード全体を貼り付けずに例を与えることはできますが、私がすべての入力ボックスに対してjq_watermarkプラグインを無効にすると、そのうちの1つが固定され、正しく動作するが、残りはまだ盗聴されているという奇妙なことがあります。私はCSSスタイルをすべて取り除きましたが、まだ1つを除くすべてがこのように盗聴されています。非常に奇妙な。

Answer 1

stacking contextのようなものです。要素のpositionまたはopacity < 1を設定すると、新しいスタッキングコンテキストになります。つまり、opacityが1より小さいか、jqueryがpositionをアニメーションの実行中に変更してから終了したときに変更するために、フェーディング中に別のスタッキングコンテキストを持つ可能性があります。しかし、自分自身でそれを見ることなく、確かに言うのは難しい。しようとする

もの：

• 変更ソースコード内のフォーム要素対オーバーレイの順。
• divのオーバーレイをposition:relativeで囲みます。
• opacity < 1によって引き起こされるスタッキングコンテキストの問題であるか、またはjqueryがpositionを設定していることが原因であるかどうかを完全に見るのではなく、完全にではなくフェードします。
• z-indexを使用しているすべての要素がpositionを使用して配置されていることを確認してください。 z-indexは、位置が設定された要素にのみ適用されます。