代码之家 › 专栏 › 技术社区 › Vasilij Altunin

CSS-覆盖始终位于菜单顶部

overlay menu css html

Vasilij Altunin · 技术社区 · 6 年前

我正在创建一个覆盖菜单。它在早期阶段有效,但现在我有一个不寻常的问题。我已经创建了覆盖图和菜单,但是覆盖图总是在顶部,不管我设置了什么值的z索引。

下面是一个演示: 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

1 回复 | 直到 6 年前

Louie Rosero 6 年前

如果不先声明位置,就不能使用CSS属性z-index。

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