我的网站有一个模态窗口和固定的菜单栏。当您打开模态窗口时,菜单不会被隐藏。如何使栏菜单低于模态窗口?
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;
}
最佳答案
如果您将 panel-nav
block 移动到 container
中,它可以工作,但对我来说它不适合。帮助!
关于html - 两个元素位置固定忽略 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27599503/