導航欄下拉菜單被遮擋問題或者顯示不全問題

     （1） 當我們設置頁面頭部組件時，一般會固定在頁面頂部，這樣是沒有問題的，但是當頭部組件有下拉菜單時，問題就來了，菜單部分會被下面的頁面遮擋。這時我們想到的第一個辦法就是z-index 增加其層級，但當下面的部分設置了position,那么菜單欄即使增加了層級也不會解決這種問題，那么怎么解決呢？

       想要解決這種問題，就需要往頭部組件和下面主體的的共同的父級上面找，在兩個都設置了position 的情況下，給頭部和下面主題設置z-index ，如下代碼：

<div ref="main" class="review_page">
    <pageHeader header-title="評測"></pageHeader>
    <div class="review_main"></div>
</div>


css：
.review_main{
    padding-top: 80px;
    padding-bottom: 106px;
    position: relative;
    z-index: 0;
}

頭部組件 最外層  css  部分
.headerPage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

思路：

• 1、必須是同級；
• 2、二者分別設定了position:relative 或 absolute 或 fixed；
• 這時候通過設置z-index才有效

　　

（2）還有一種情況導航下拉菜單顯示不全是因為外層設置了overflow:hidden

很多時因為網頁比較復雜，層級比較多，所以經常忽略了外層或者外外外層設置了overflow:hidden導致導航下拉菜單顯示不全，其實只要仔細查找就能解決問題，把overflow:hidden去掉，如果需要清除浮動，可以用其它方法，百度css清除浮動就有了。