菜单位于页面内容（z-index）

Question

我正在Shopify的客户网站上工作，由于某种原因，下拉菜单似乎位于产品显示和过滤器下方。我试过改变z-index但没有运气。

有谁知道问题可能是什么？以下是有问题的页面的链接：https://livingtextiles.com/collections/test-collection

<header id="header" style="background-color:#fff!important;">
  <div class="header-top pbf-header-top">
  <div class="container pbf-container">
    <div class="col-md-10 col-sm-9 col-xs-12">
      <div class="logo">

         <a href="/pages/wholesale" class="pbf-ws-logo-image"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/wholesale-logo.png?16165857088723477752"></a>

      </div>
      <nav class="menu-top">
  <ul>    
    <li class="level-1 dropdown">
      <a class="dropdown-toggle a1 pbf-ws-text" data-toggle="dropdown" title="Living Textile Brands" style="color:#0c3056!important;font-size: 23px;padding-right:20px;">SHOP BY BRANDS</a>
 <ul class="menu-level2 dropdown-menu pbf-column">
 <div>
        <li class="level2"><a href="" title=""></a></li>
        <li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/living-textile-ws-logo.png?15789627674492600681"></li>
        <li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/lolli-living-ws-logo.png?11306798353806545224"></li>
        <li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/poppi-living-ws-logo.png?11306798353806545224"></li>
   </div></ul>

     <li class="level-1 dropdown">
      <a href="/collections" class="dropdown-toggle a1" data-toggle="dropdown" title="Living Textile Collections" style="color:#0c3056!important;">Collections</a>
 <ul class="menu-level2 dropdown-menu">

/*** CSS ***/
    #header {
         display: block;
         float: left;
         width: 100%;
    }

Answer 1

将position:relative和z-index:99设置为#header，这样可以解决您的问题

#header {
  position:relative;
  z-index:99;
}