javascript - Z-index 和 jQuery 切换

Question

我有几个水平排列的 div，用作导航栏上的按钮。单击此按钮时，隐藏的子菜单 div 将在单击的按钮下方可见，但在所有其他按钮上方。

问题:即使 z-index 如果被点击的按钮 div 更改为大于子菜单 div 的 z-index。在这方面得到一些帮助会很棒! :)

HTML 代码

<div class="filter_tab" id="filter_tab_rent"><p>Min/Max Rent</p></div>
    <div id="filter_submenu_rent">
        Hello
</div>

jQuery 代码

$("#filter_tab_rent").click(function(e) {
    $("#filter_tab_rent").toggleClass('filter_tab_selected');
    $("#filter_submenu_rent").toggle();
});

CSS 代码

.filter_tab {
    height: 38px;
     min-width: 50px;
     border: 1px solid #D9D9D9;
     border-bottom: none;
     float: left;

.filter_tab_selected {
    z-index: 500
}

#filter_submenu_rent {
    width: 300px;
    height: 50px;
    background: #FFF;
    position: absolute;
    top: 65px;
    display: none;
    z-index: 100;
    border: 1px solid #D9D9D9;
    box-shadow: 0px 2px 5px #888;

附加信息:我正在使用 Chrome 浏览器查看此内容。

Answer 1

z-index 仅适用于相对位置和绝对位置的元素。为您的 .filter_tab_selected 样式添加一个位置。