我来帮你搞定这个层级冲突的问题！你遇到的核心问题是：固定定位的社交图标z-index设置为99，而Bootstrap折叠展开后的导航菜单没有足够高的z-index，而且你之前可能给错误的元素加了z-index（比如.navbar默认是static定位，z-index对它无效）。

解决方案 #

只需要给展开状态的导航菜单容器添加更高的z-index，同时确保它是定位元素（relative即可），这样就能让菜单覆盖在社交图标上方。在你的CSS里添加以下规则：

/* 针对展开的折叠导航菜单设置层级 */
.acme-navbar-menu.collapse.in {
  position: relative;
  z-index: 100; /* 比社交图标的99高即可 */
}

完整代码示例 #

CSS部分 #

.j-media-icons { 
  width: 40px; 
  position: fixed; 
  top: 30%; 
  z-index: 99; 
} 
.j-media-icons ul { 
  margin: 0; 
  padding: 0; 
} 
.j-media-icons ul li { 
  list-style: none; 
  margin-top: 2px; 
  margin-bottom: 2px; 
  text-align: center; 
  padding: 10px 0; 
  opacity: 0.6; 
} 
.j-media-icons ul li:hover { 
  opacity: 1; 
} 
.j-media-icons ul li a { 
  text-align: center; 
  text-decoration: none; 
  padding: 10px 12px; 
} 
.j-media-icons ul li.facebook { 
  background: #3b5998; 
} 
.j-media-icons ul li.facebook a { 
  color: #ffffff; 
  padding: 10px 15px; 
} 
.j-media-icons ul li.twitter { 
  background: #1da1f2; 
} 
.j-media-icons ul li.twitter a { 
  color: #ffffff; 
} 
.j-media-icons ul li.instagram { 
  background: #f09433; 
} 
.j-media-icons ul li.instagram a { 
  color: #ffffff; 
} 
.j-media-icons ul li.vimeo { 
  background: #1da1f2; 
} 
.j-media-icons ul li.vimeo a { 
  color: #ffffff; 
}

/* 新增的层级修复规则 */
.acme-navbar-menu.collapse.in {
  position: relative;
  z-index: 100;
}

HTML部分 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<div class="navbar navbar-default" style="border-radius: 0;"> 
  <div class="container"> 
    <div class="navbar-header"> 
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#acme-navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button> 
      <a href="#" class="navbar-brand" title="Acme"> 
        Acme 
      </a> 
    </div> 
    <div id="acme-navbar" class="navbar-collapse collapse acme-navbar-menu"> 
      <ul class="nav navbar-nav navbar-right"> 
        <li> 
          <a href="#" class="dropdown-toggle">ABOUT</a> 
        </li> 
        <li> 
          <a href="#" class="dropdown-toggle">SERVICES</a> 
        </li> 
        <li> 
          <a href="#" class="dropdown-toggle">PRODUCTS</a> 
        </li> 
        <li> 
          <a href="#" class="dropdown-toggle">CONTACT</a> 
        </li> 
      </ul> 
    </div> 
  </div> 
</div> 
<div class="j-media-icons"> 
  <ul> 
    <li class="facebook"> 
      <a target="_blank" href="#" title="Facebook" data-toggle="tooltip"> 
        F 
      </a> 
    </li> 
    <li class="twitter"> 
      <a target="_blank" href="#" title="Twitter" data-toggle="tooltip"> 
        T 
      </a> 
    </li> 
    <li class="instagram"> 
      <a target="_blank" href="#" title="Instagram" data-toggle="tooltip"> 
        I 
      </a> 
    </li> 
  </ul> 
</div> 
<div class="container"> 
  <p class="text-justify"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida tempus dolor pharetra congue. Nam mollis augue eget viverra posuere. In tempus, orci ac vestibulum pharetra, lacus dui ullamcorper diam, eu hendrerit quam nisi ac purus. Morbi vitae accumsan lorem. Morbi bibendum massa dui, ac consectetur orci ultricies sit amet. Morbi placerat ac lacus nec sodales. Nulla rutrum nisi odio, et cursus nulla accumsan eu. Sed varius non justo sit amet gravida. Ut eros leo, elementum vitae nibh ut, aliquam scelerisque neque. Donec semper sapien nisi, et commodo justo semper pellentesque. Etiam vehicula pulvinar risus et feugiat. Etiam ut justo rutrum, ultrices nibh ac, tempus justo. Proin non aliquam libero. Etiam venenatis eros eget sagittis laoreet. Fusce vel euismod elit. Nunc auctor felis non commodo elementum. Ut ullamcorper, dui nec tincidunt laoreet, quam quam consequat tellus, vitae finibus urna eros eu dolor. Vivamus at finibus urna. Quisque vulputate dapibus nisi nec convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec eu libero viverra, pellentesque tellus nec, lacinia ante. Vestibulum interdum lacus et felis hendrerit, eu mollis augue aliquet. Sed sed ultricies dui. Nullam rhoncus mi dui, in efficitur nunc blandit eu. Nulla dui enim, ullamcorper a varius vel, semper nec orci. Proin quis lacinia metus. Quisque suscipit semper tempus. Etiam aliquet iaculis urna vitae feugiat. Nullam ut risus nisl. Sed ligula leo, egestas id justo a, ultricies pulvinar ligula. Morbi eu est mi. Nullam mattis, ligula quis dapibus auctor, urna diam feugiat lectus, eu ultrices urna tellus dictum leo. Vestibulum ut pharetra tellus. Duis rhoncus ornare dapibus. Vestibulum eu elit suscipit diam condimentum ultricies id ac orci. Vivamus quis dictum orci. Etiam ul...
  </p>
</div>

为什么这样有效？ #

• 固定定位的.j-media-iconsz-index是99，我们给展开后的菜单（.acme-navbar-menu.collapse.in）设置z-index:100，数值更高所以层级更靠前。
• 同时给菜单容器设置position: relative，因为z-index只对非static定位的元素生效，这样z-index的设置才会起作用。
• 这个规则只会在菜单展开时生效，不会影响正常屏幕尺寸下的导航栏布局。

内容的提问来源于stack exchange，提问作者Blues Clues