Question

我正在创建带有覆盖层的菜单。它在早期阶段就起作用了，但是现在我遇到了一个异常问题。我已经创建了叠加层和菜单，但是无论将z-index设置为什么值，叠加层始终位于最上方。

我计划创建一个菜单，该菜单将在悬停时打开一个子菜单，此后必须显示覆盖图，以便在屏幕上仅可见菜单和子菜单项。

这是一个演示：http://jsbin.com/wobopagamu/edit?html,css,output

.left_menu, .left_menu_sub_panel, .left_menu_sub_panel_list {
    list-style: none;
    -webkit-padding-start: 0px;
    padding: 0px;
    margin-left: 0px !important;
}

.left_menu_wrap {
    position: relative;
}

.left_menu {
    z-index: 2000;
}

.left_menu_sub_panel {
    background-color: white;    
    border: 1px #000 solid;
    position: absolute;
    top: 0px;
    left: 226px;
    padding: 30px;
    /*min-width: 400px;*/
    white-space: nowrap;
}


.left_menu > li {
    border-top: 0px;
    border-left: 2px #cd0000 solid;
    border-bottom: 1px #ddd solid;
    border-right: 1px #ddd solid;
    padding: 10px;
    cursor: pointer;
    max-width: 200px;
}

.left_menu > li > a {
    text-decoration: none;
    cursor: pointer;
    color: #444;
}

.left_menu a:hover, .left_menu a:visited, .left_menu a:active {
    text-decoration: none;
    color: #cd0000;
}




.menu_overlay {
 position: fixed; /* Sit on top of the page content */
    display: block; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 1000; /* Specify a stack order in case you're using a different order for other elements */
}

<div class="menu_overlay"></div>


<div class="left_menu_wrap">
<ul class="left_menu">
<li> 
<a href="#">Пункт 1</a>
    <ul class="left_menu_sub_panel">
            <li> 
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 1</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 1</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 3</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 4</a>
                    </li>                        
                </ul>
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 1</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 3</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 4</a>
                    </li>                        
                </ul>
            </li>    
            <li> 
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 1</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 2</a>
                    </li>                        
                    <li> 
                        <a href="#">ПодПодПункт 3</a>
                    </li>                        
                </ul>
            </li>    
            <li> 
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 3</a>
                    </li>                        
                </ul>
            </li>    
            <li> 
                <ul class="left_menu_sub_panel_list">
                    <li> 
                        <a href="#">ПодПункт 4</a>
                    </li>                        
                </ul>
            </li>    
    </ul>
</li>
<li> 
<a href="#">Пункт 2</a>
</li>
<li> 
<a href="#">Пункт 3</a>
</li>
<li> 
<a href="#">Пункт 4</a>
</li>
</ul>
</div>

我想念什么吗？

更新1： 我修复并改进了菜单，在这里您可以找到可以使用的菜单：

http://jsbin.com/sivobucato/3/edit?html,css,js,output

Answer 1

您必须先声明位置，才能使用CSS属性z-index。

.left_menu
{
  position: relative; // Add this code.
  z-index: 2000;
}

CSS-始终位于菜单顶部

1 个答案: