Overlay conflict with input field

Question

Had a question. I'm trying to include a widget (which is contained in a div) for my landing page. Now, essentially what I am trying to do is when i hit the button is to fire the OverLayTwo BUT have it fall to the background, instead of the foreground. I tried the z-index method and it doesn't seem to help.

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

So essentially what I want is when User hits button, to have 'OverLayTwo' drop however have it fall to the BACKGROUND/backdrop behind the "widgetContainer" div. --

The reason is I want the user to be able to type into the input field(s), however, lately everything I have looked at or referenced is not solving the problem. Essentially just drops the overlay ontop/into the front of the widget - Not allowing the user to enter text into the appropriate input field.

Hope that made sense. The land of CSS is a true maze oo ...Also, it should be noted I am using javascript and jQuery functionality.

Any tips and/or suggestions would be truly appreciated!

Thank you!

Answer 1

would be hard to make it fall in the background when it lives inside the first overlay.. try something like this..

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