导航下拉菜单被遮住或显示不全问题所在和解决办法（z-index）

短命女 2022-12-18 07:58 332阅读 0赞

## 一、导航下拉菜单被遮住，那是因为层叠关系错误 ##

### 我们必须理解层叠关系满足的2个条件： ###

*  1、必须是同级；
 *  2、二者分别设定了position:relative 或 absolute 或 fixed；
 *  这时候通过设置z-index才有效

看看我们比较常见的网页布局：

html:

<div class="header">
     
        <div class="nav">
            <ul class="mNav">
                这是下拉菜单
                .........
            </ul>
        </div>
     
    </div>
     
    
    <div class="banner">
        <div class="slider">这是焦点图....</div>
    </div>

错误css

.header{  }
    .header .nav{  z-index:9999; height:50px; color:#fff; text-align:center;  }
    .banner{  position:relative; margin:10px auto; height:300px; }

上面css里吧nav的z-index设置成9999，但发现下拉还是被挡住，这是因为此时banner设置了position,会在nav上面。

**想要nav在banner上面，就需要向上查找，发现nav的外层(header)和banner在同一级（满足条件1）**，

这时候同时设置header和banner的position和z-index，使header在banner上面即可，此时nav的z-index已经无关重要了。

**正确css:**

.header{  position:relative; z-index:1 }
    .header .nav{   height:50px; color:#fff; text-align:center; }
    .banner{  position:relative; z-index:0; margin:10px auto; height:300px; }

例子2：

如果你的html结构这样的：

<div class="header">
     
        <div class="nav">
            <ul class="mNav">
                这是下拉菜单
                .........
            </ul>
        </div>
     
    </div>
     
    
    <div class="content">
        <div class="banner">
            <div class="slider">这是焦点图....</div>
        </div>
    </div>

那么分别设置header和content的position和z-index，因为2者在最外层并且同级。

其它同理。

### 二、导航下拉菜单显示不全是因为外层设置了overflow:hidden ###

很多时因为网页比较复杂，层级比较多，所以经常忽略了外层或者外外外层设置了overflow:hidden导致导航下拉菜单显示不全，其实只要仔细查找就能解决问题，把overflow:hidden去掉，如果需要清除浮动，可以用其它方法，百度css清除浮动就有了。

转载：https://blog.csdn.net/FireBird\_one/article/details/78864929