滑动格的覆盖内容

Question

http://rpedrosa.com/efinancial/

在这个页面中，我试图在框中滑覆盖其他内容的迹象，但它总是在它之下，甚至设置z-index: 999后。 有什么帮助吗？

这里是我的代码：

HTML：

<nav> 
    <ul id="primary-nav"> 
     <li><a href="#">All jobs</a></li> 
     <li><a href="#">Candidates</a></li> 
     <li><a href="#">Recruiters</a></li> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Help</a></li> 
     <li><a href="#">Contact Us</a></li> 
     <li id="login-link"><span class="fa fa-user user-icon"></span>Sign In <span class="fa fa-chevron-down chevron-icon"></span></li> 
    </ul> 
    <div id="signin-box"> 
     <form id="form-signin" action=""> 
      <label for="username">Username</label> 
      <input type="text" name="username"> 
      <label for="password">Password</label> 
      <input type="text" name="password"> 
      <button type="submit">Sign In</button> 
      <div>Not registered?</div> 
      <button type="button">Sign Up</button> 
     </form> 
    </div> 
</nav> 

CSS：

header nav { 
    float:right; 
    position:relative; 
    margin:20px 0; 
    height:50px; 
} 

div#signin-box { 
    position:absolute; 
    top:50px; 
    right:0; 
    background-color:#015163; 
    padding:20px; 
    color:#FFF; 
    font-size:18px; 
    z-index:999; 
    display:none; 
} 

提前感谢！ :)

Answer 1

它实际上是不落后于其他元素，它正在由具有overflow: hidden;适用于它的.inner元素剪裁。

很明显，您使用的是clearfix purposes，这意味着我们需要一个备用的clearfix，比如流行的:after clearfix。

如果更换：

.inner { 
    margin: 0 auto; 
    max-width: 1200px; 
    overflow: hidden; 
    padding: 20px; 
} 

有了：

.inner { 
    margin: 0 auto; 
    max-width: 1200px; 
    padding: 20px; 
} 
.inner:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 

它将工作。

Answer 2

此问题正在由您的.inner类中的overflow: hidden;创建，要解决此问题，您需要将其删除并用高度替换它。以下是如何做到这一点：

.inner { 
    max-width: 1200px; 
    margin: 0 auto; 
    height: 90px; 
    padding: 20px; 
} 

Answer 3

这有点棘手。但是，这会工作（虽然它可能会产生另外一个问题，由于你的代码的CSS的方式）

1. 删除overflow属性从.inner CSS类
2. 下<section id="search">..</div>添加<div style='clear:both'></div>

应该看如下所示：

<header>...</header> 
<div style='clear:both'></div> 
<section id="search">...</section> 
<div style='clear:both'></div> 
<section id="search">...</section> 

您应该使用clear:both来清洁浮起来。它会比使用更好的工作overflow:hidden;