html - CSS - 总是覆盖在菜单之上

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;
}