Bootstrap 模态 z-index

Question

问题是：我正在使用 parrallx 滚动，所以当我尝试通过 Bootstrap 弹出框模式时，我现在在页面中有 z-index 我让他看起来像这样 https://www.dropbox.com/s /42tzvfppj4vh4vx/截图%202013-11-11%2020.38.36.png

如您所见，框模式不在顶部，任何鼠标单击都会禁用它。如果我禁用此 css 代码：

 #content {
    color: #003bb3;
    position: relative;
    margin: 0 auto;
    width: 960px;
    z-index: 300;
    background: url('../images/parallax-philosophy-ltl.png') top center;
}

框模态有效。请注意，Bootstrap 默认 .modal 是 z-index:1050 ，所以我不明白为什么它不在所有其他上下文之上。

那是盒子模态：

    <section id="launch" class="modal hide fade">
    <header class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3>אשר הגעה לחתונה  </h3>
    </header>
    <div class="modal-body">
        <form method="post" action="/update" id="myForm2">
            <input type="radio"  id="yes_arrive" name="arrive" checked="checked" value="yes">מגיע<br>
            <p><input type="text" required name="fsname" value="" placeholder="הכנס שם פרטי ומשפחה "></p>
            <p>כמה אנשים מגיעים?   </p>
            <select name="number" id="number">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>

            </select>
            <hr/>
            <input type="hidden" name="title" id="title" value="{{title}}">
            <input type="radio" name="arrive" id ="no_arrive" value="no">לא מגיע
            <p>סיבה לאי הגעה</p>
            <input type="text" name="no_arrive_reason" placeholder="קצר ולעניין, לא שדה חובה">
            <hr/>
            <p class="submit"><input type="submit" name="submit" value="שלח"></p>

        </form>
    </div>
    <footer class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">Close</button>
    </footer>
</section>

我从顶部菜单触发他：

   <li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>

提前谢谢。

编辑

如果有人遇到同样的问题，则找到解决方案。这是方法：将 data-backdrop=“false” 添加到包含模态的部分或 div，例如： <section id="launch" class="modal hide fade in" data-backdrop="false"> 注意它不会以这种方式获得灰色背景，所以它有点脏解决方案，很高兴听到更好的解决方案。

原文由 Dagan Bog-Computers 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题几乎总是与“嵌套”的 z 索引有关。举个例子：

 <div style="z-index:1">
  some content A
  <div style="z-index:1000000000">
    some content B
  </div>
</div>
<div style="z-index:10">
  Some content C
</div>

如果只查看 z-index，您会期望 B、C、A，但因为 B 嵌套在明确设置为 1 的 div 中，所以它将显示为 C、B、A。

设置 position:fixed 锁定该元素及其所有子元素的 z-index，这就是为什么更改可以解决问题的原因。

解决方案是找到设置了 z-index 的父元素，然后调整设置或移动内容，以便图层及其父容器按照您想要的方式堆叠。 Firefox 中的 Firebug 在最右侧有一个名为“Layout”的选项卡，您可以快速进入父元素并查看 z-index 的设置位置。

原文由 Jon 发布，翻译遵循 CC BY-SA 3.0 许可协议