Überlagerungskonflikt mit Eingabefeld

Question

Hatte eine Frage. Ich versuche, ein Widget (das in einem div enthalten ist) für meine Zielseite einzubinden. Nun, im Wesentlichen versuche ich zu tun, wenn ich den Knopf drücke, um den OverLayTwo auszulösen, ABER ihn in den Hintergrund fallen zu lassen, anstatt in den Vordergrund. Ich habe versucht, die Z-Index-Methode und es scheint nicht zu helfen.

<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> 

Also im Wesentlichen, was ich will, ist, wenn die Benutzertaste trifft, ‚OverLayTwo‘ drop aber zu haben haben es hinter dem „widgetContainer“ div auf den Hintergrund/Hintergrund fallen. -

Der Grund ist, ich möchte der Benutzer in der Lage sein, in die Eingabefelder einzugeben, aber in letzter Zeit löst alles, was ich angeschaut oder verwiesen habe, das Problem nicht. Im Wesentlichen wird nur das Overlay auf der Oberseite des Widgets abgelegt - Der Benutzer kann den Text nicht in das entsprechende Eingabefeld eingeben.

Hoffnung, die Sinn ergab. Das Land von CSS ist ein wahres Labyrinth o.o ... Außerdem sollte ich darauf hinweisen, dass ich Javascript und jQuery-Funktionalität verwende.

Alle Tipps und/oder Vorschläge würden wirklich geschätzt werden!

Vielen Dank!

Answer 1

würde schwierig sein, sich im Hintergrund fallen, wenn es in der ersten Auflage lebt .. so etwas wie dies versucht ..

<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>