滑动div叠加内容

Question

在此页面中，我试图让登录框滑动覆盖其他内容，但它总是在它下面，即使在设置 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

此问题是由您的 .inner class 中的 overflow: hidden; 造成的，要解决此问题，您需要将其删除并替换为高度。操作方法如下：

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

Answer 2

它实际上不在另一个元素后面，它被应用了 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 3

这有点棘手。但这会起作用（尽管由于您编码 css)

的方式可能会产生另一个问题

从 .inner css class

overflow

在<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;

更好用

滑动div叠加内容

Sliding div overlay content

html

css

slide