Two elements position fixed ignored z-index

Question

My site has a modal window and menu bar fixed. When you open a modal window menu is not hidden. How to make so that the bar menu was lower against the modal window?

HTML code:

<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 code:

.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

If you move the block panel-nav inside container it works, but to me it does not fit. Help!

Answer 2

If your using the same layout a good choice is:

http://masonry.desandro.com/

This will save you ALOT of work. Try looking at this, its responsive and repositions the elements you want. If you have any problems leave a comment and I can include a jsfiddle or further examples to help you.

But I would defiantly suggest using masonry, will save you a lot of work.