Sliding div overlay content

Question

In this page, I am trying to make the sign in box slide overlaying the other content, but it always comes under it, even after setting z-index: 999. Any help?

Here's my code:

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

Thanks in advance! :)

score 3 · Answer 1 · answered Apr 07 '15 at 01:51

3

This issue is being created by the overflow: hidden; in your .inner class, to solve this, you need to remove it and replace it with a height instead. Here's how to do it:

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

answered Apr 07 '15 at 01:51

Works fine, but I prefer the solution below, as it avoids a fixed height. Many thanks anyway! :) – rjpedrosa Apr 07 '15 at 02:10

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

It's actually not behind the other element, it's being clipped by the .inner element which has overflow: hidden; applied to it.

Evidently you are using this for clearfix purposes, which means we will need an alternate clearfix, such as the popular :after clearfix.

If you replace:

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

With:

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

It will work.

edited May 23 '17 at 12:28

Community

1
1

answered Apr 07 '15 at 01:52

Alexander O'Mara

58,688
18
163
171

awww you beat me by a minute there – syanaputra Apr 07 '15 at 01:52
Oh, my bad! Forgot about the overflow hidden. Works great, thanks! – rjpedrosa Apr 07 '15 at 02:09

score 1 · Answer 3 · answered Apr 07 '15 at 01:52

This is a bit tricky. But this will work (although it may create another problem due to the way you code the css)

Remove overflow attribute from .inner css class
Under the <section id="search">..</div> add <div style='clear:both'></div>

It should look like the following:

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

You should use clear:both to clean up float. It'll work better than using overflow:hidden;

Thanks. Used the solution above yours as I prefer to add the clear by CSS :after pseudo. — rjpedrosa, Apr 07 '15 at 02:11

Sliding div overlay content

3 Answers3