css - Bootstrap 页脚导航覆盖 PopUp Div

Question

我在尝试让 Bootstrap 3 页脚导航正确放置在 SharePoint 2013 Intranet 网站上时遇到问题。

这就是我所看到的:http://screencast.com/t/vQFVCBbfE7P

在开发人员工具中，我试图将页脚导航本身的 z-index 向下移动到 0(这部分起作用，即灰色背景没有 float 在弹出 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:0 上一直使用 !important 直到 a 标签似乎也无济于事。

此问题出现在所有浏览器中。

需要注意的是:

• Div 似乎是由 JavaScript 中的 MS 代码生成的(对于所有 Div Popup 创建)
• 它覆盖了 ul 或 li 或 a 中页脚导航中的任何内容

我意识到我缺少一些简单的东西，但 CSS 不是我的强项。任何帮助都将不胜感激。

谢谢

Answer 1

添加以下代码或给我托管的 url 来检查

nav-footer {
  z-index:100 !important;
}