滑動格的覆蓋內容

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;