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

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

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

Answer 2

它实际上不在其他元素的后面，它被.inner元素剪切，overflow: hidden;元素已应用:after。

显然您将此用于clearfix purposes，这意味着我们需要一个备用的clearfix，例如流行的.inner { margin: 0 auto; max-width: 1200px; overflow: hidden; padding: 20px; } clearfix。

如果替换：

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

使用：

{{1}}

它会起作用。

Answer 3

这有点棘手。但这样可行（尽管由于你编写css的方式可能会产生另一个问题）

从overflow css class

.inner

在<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叠加内容

3 个答案: