入力フィールドとのオーバーレイ競合

Question

質問がありました。リンク先ページにウィジェット（divに含まれています）を追加しようとしています。さて、本質的に私がしようとしているのは、ボタンを押したときにOverlayTwoを発射するのですが、フォアグラウンドではなくバックグラウンドに落ちることです。私はz-indexメソッドを試してみましたが、それは役に立たないようです。ユーザーがボタンを押したときに、基本的に私が欲しいもの

<div class="OverLay"> 

    <div class="widgetContainer"> 
     <li>This is a Div</li> 
     First Name: <input type="text" name="fname"></input> 
    </div> 

    <div class="OverLayTwo"> 

    </div> 

     <button class="randomButton">Hello</button> 

    </div> 

は、しかし、それは「widgetContainer」のdivの背景/背景に落ちる持つ「OverLayTwo」ドロップを持つこと、です。 -

なぜなら、ユーザーが入力フィールドに入力できるようにしたいのですが、最近私が見ているか参照しているすべてが問題を解決していません。基本的には、ウィジェットの前面にオーバーレイをドロップするだけです。ユーザーがテキストを適切な入力フィールドに入力することはできません。

意味が合っています。 CSSの土地は真の迷路です。...また、私はjavascriptとjQueryの機能を使っています。

ヒントやご提案をいただければ幸いです。

ありがとうございました！

Answer 1

すると、このような何かをしようと...それは最初のオーバーレイの内側に住んでいたときに、それがバックグラウンドに落ちる作ることは難しいだろう。..

<div class="OverLay" style="z-index:100"> 
<div class="widgetContainer"> 
    <li>This is a Div</li> 
    First Name: <input type="text" name="fname"></input> 
</div> 
    <button class="randomButton">Hello</button> 
</div> 

<div class="OverLayTwo" style="z-index:90"> 
</div>