knowledgealways knowledgealways - 4 months ago 21
CSS Question

Overlay conflict with input field

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 o.o ...Also, it should be noted I am using javascript and jQuery functionality.

Any tips and/or suggestions would be truly appreciated!

Thank you!

CSS;

.OverLay {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*white overlay*/
background-color: rgba(255, 255, 255, 0.9);
/*Answer by 'meagar sucks' inserted here*/
z-index: 100;
}


.OverLayTwo {
display:none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
/*Answer by 'meagar sucks' inserted here*/
z-index: 90;
}

Answer

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