html - 两个元素位置固定忽略 z-index

Question

我的网站有一个模态窗口和固定的菜单栏。当您打开模态窗口时，菜单不会被隐藏。如何使栏菜单低于模态窗口？

HTML代码:

<nav class="panel-nav">
    <ul>
        <li><a href="#about-us">About Us</a></li>
        ...
    </ul>
</nav>

<nav class="navbar navbar-fixed-top nav-top" role="navigation">
    <div class="container">
        <div class="buttons">
            <button class="feedback text-left" data-toggle="modal" data-target="#write-us">Feedback</button>
            <!-- Modal -->
            <div class="modal fade" id="write-us" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <!-- Content -->
                </div>
            </div>
        </div>
    </div>
</nav>

CSS 代码:

.panel-nav {
    position: fixed;
    z-index: 3;
    right: 0;
    top: 0;
    bottom: 0;
    width: 150px;
    height: 100%;
    background: #f6f6f3;
    font-size: 14px;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

Answer 1

如果您将 panel-nav block 移动到 container 中，它可以工作，但对我来说它不适合。帮助!