Question

我的网站有一个模态窗口和菜单栏已修复。当您打开模态窗口菜单时，不会隐藏。如何使条形菜单相对于模态窗口更低？

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代码：

.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内移动块container，它可以正常工作，但对我来说它不合适。救命啊！

Answer 2

如果您使用相同的布局，那么一个不错的选择是：

http://masonry.desandro.com/

这将为您节省大量工作。试着看看它，它的响应和重新定位你想要的元素。如果您有任何问题，请发表评论，我可以提供一个jsfiddle或其他示例来帮助您。

但我坚决建议使用砖石，会为你节省很多工作。

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

2 个答案: