javascript - 覆盖与输入字段冲突

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>

所以基本上我想要的是当用户点击按钮时，让'OverLayTwo'下降但是让它落到“widgetContainer”div后面的背景/背景。 --

原因是我希望用户能够在输入字段中输入内容，但是，最近我查看或引用的所有内容都没有解决问题。本质上只是将叠加层放在小部件的顶部/前面 - 不允许用户在适当的输入字段中输入文本。

希望这是有道理的。 CSS 领域是一个真正的迷宫 o.o ...此外，应该注意我正在使用 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>