覆盖与输入字段冲突

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 后面的 BACKGROUND/backdrop。 --

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

希望这是有道理的。 CSS 的土地是一个真正的迷宫 o.o ...另外，应该注意我正在使用 javascript 和 jQuery 功能。

任何提示 and/or 的建议将不胜感激！

谢谢！

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>

覆盖与输入字段冲突

Overlay conflict with input field

javascript

css

jquery

overlay

field