我在尝试在SharePoint 2013 Intranet网站上正确启用Bootstrap 3页脚导航时遇到问题。
这就是我所看到的：http://screencast.com/t/vQFVCBbfE7P
在开发者工具中，我试图将z-index向下移动到0，用于页脚导航本身（该部分部分工作，即灰色背景不浮动在弹出div上）
我的相关CSS是
.footerTagline {
background: #001F5B;
color: white;
padding: 2px 0px;
}
#bs-footer-nav ul li ul li {
margin-left: -40px;
}
.BHIFooterInfo, .BHIFooterInfo div {
z-index:0;
position:inherit !important;
background: rgb(138,141,143);
}
.BHIFooterInfo, #companySites {
padding-top: 10px;
padding-bottom: 20px;
}
#bs-footer-nav li {
color: rgb(241, 180, 52);
padding-right: 35px;
}
#bs-footer-nav li ul li {
color: rgb(241, 180, 52);
padding-right: 0px;
}
#bs-footer-nav, #bs-footer-nav a {
background: rgb(138, 141, 143);
color: #fff;
}
.navbar {
margin-bottom: 0px;
}
.footerSocialImages {
width:23px;
height: 23px;
}
#bhiSocialLinks li, #bhiSocialLinks li a {
padding-left: 0px;
padding-right: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<nav class="navbar navbar-default BHIFooterInfo">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-footer-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Footer Navigation</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-footer" id="bs-footer-nav">
<ul class="nav navbar-nav">
<li>Company Information
<ul>
<li><a href="linkurl.com">Goals and Initiatives</a></li>
<li><a href="linkurl.com">BISSELL Locations</a></li>
<li><a href="linkurl.com">BISSELL Strategy</a></li>
<li><a href="linkurl.com">Corporate Calendar</a></li>
<li><a href="linkurl.com">Engagement Survey</a></li>
<li><a href="linkurl.com">Global Business Update</a></li>
<li><a href="linkurl.com">MTD Sales</a></li>
<li><a href="linkurl.com">Organizational Chart</a></li>
<li><a href="linkurl.com">Press Releases</a></li>
</ul>
</li>
<li>Global BISSELL Sites
<ul>
<li><a href="http://www.bissell.com.au" target="_blank">Australia</a></li>
<li><a href="http://canada.bissell.com" target="_blank">Canada</a></li>
<li><a href="http://www.bissell.cn" target="_blank">China</a></li>
<li><a href="http://www.bissell.cn" target="_blank">Hong Kong</a></li>
<li><a href="http://www.bissell.nl" target="_blank">Netherlands</a></li>
<li><a href="http://www.bisselldirect.co.uk" target="_blank">United Kingdom</a></li>
<li><a href="http://www.bissell.com" target="_blank">United States</a></li>
</ul>
</li>
<li>Quick Links
<ul>
<li><a href="linkurl.com">Associate Take Home Program</a></li>
<li><a href="linkurl.com">BISSELL Outlet Store</a></li>
<li><a href="linkurl.com" target="_blank">Idea Hopper</a></li>
<li><a href="linkurl.com" target="_blank">Guest Registration </a></li>
<li><a href="http://linkurl.com">Meeting Services</a></li>
<li><a href="http://linkurl.com/" target="_blank">Partner Site</a></li>
<li><a href="http://linkurl.com/" target="_blank">Supplier Site</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" id="bhiSocialLinks">
<li><a href="https://www.facebook.com/bissell" target="_blank"><img src="/Style Library/Images/socialMedia Links/Facebook_white.png" class="footerSocialImages" alt="Facebook"></a></li>
<li><a href="https://www.instagram.com/bissellclean/" target="_blank"><img src="/Style Library/Images/socialMedia Links/Instagram_white.png" class="footerSocialImages" alt="Instagram"></a></li>
<li><a href="https://twitter.com/bissellclean" target="_blank"><img src="/Style Library/Images/socialMedia Links/Twitter_white.png" class="footerSocialImages" alt="Twitter"></a></li>
<li><a href="https://www.youtube.com/user/BISSELLClean" target="_blank"><img src="/Style Library/Images/socialMedia Links/YouTube_white.png" class="footerSocialImages" alt="YouTube"></a></li>
<li><a href="https://www.linkedin.com/company/bissell-homecare-inc-" target="_blank"><img src="/Style Library/Images/socialMedia Links/LinkedIn_white.png" class="footerSocialImages" alt="LinkedIn"></a></li>
<li><a href="https://www.glassdoor.com/Overview/Working-at-BISSELL-EI_IE5594.11,18.htm" target="_blank"><img src="/Style Library/Images/socialMedia Links/GlassDoor_white.png" class="footerSocialImages" alt="Glass Door"></a></li>
<li><a href="https://www.pinterest.com/bissellclean/" target="_blank"><img src="/Style Library/Images/socialMedia Links/Pinterest_white.png" class="footerSocialImages" alt="Pinterest"></a></li>
<li><a href="https://plus.google.com/+bissell" target="_blank"><img src="/Style Library/Images/socialMedia Links/Google+_white.png" class="footerSocialImages" alt="Google+"></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
</div>
甚至在z-index上使用！important：0一直到a标签似乎无济于事。
此问题出现在所有浏览器中。
值得注意的是：
我意识到我错过了一些简单的东西，但CSS不是我的强项。任何帮助都是谦卑的。
由于
答案 0 :(得分：0)
添加以下代码或给我托管网址以查看
nav-footer {
z-index:100 !important;
}
答案 1 :(得分：0)
我现在觉得自己像个白痴。这就是最终修复它的原因：
.nav-footer ul li {
position: inherit;
}
虽然这本身并没有帮助，但它转化为：
.nav-footer ul li {
position: static;
}
当它全部逐渐消失。
编辑清晰度
包含div有一个位置：继承它。我不确定Bootstrap是否有一个位置：相对于他们的导航项目。当我再次使用z-index时，如建议所示，这些没有任何区别，甚至将它们设置为负值（隐藏所有链接除外）。当我不小心点击该位置时：继承，链接属于弹出式div。
因此，我将相同的逻辑添加到页脚div上的列表项。一旦我测试了它，它最终工作。我查看了计算出的CSS，结果证明它继承了静态值（我不知道为什么需要明确说明）。每个w3Schools，静态
默认值。元素按顺序呈现，因为它们出现在文档流程
中
所以我猜它只是重置页脚中的所有内容，以显示它在代码中出现的内容。因此，正如我所想的那样，z-index最终不是问题所在。