CODEWITHSUNDEEP
htmlcss
user2498890
user2498890

Reputation: 1556

How to stack a parent div above a div whilst it's child has a higher z-index than both?

I'm having some trouble with z-index in that I need a child element to have a higher z-index than it's parent, whilst the parent element still needs to be higher than the div above it.

I have created a jsFiddle to demonstrate what I'm trying to achieve I'm almost there but can't seem to get the scrolling-container to scroll up and over the fixed-container.

Udate: Important... I've tried making it position:absolute; and position:relative; which works but seems to break the z-index for the site-nav div, which needs to scroll over everything including the logo/links.

I'm hoping a new pair of eyes will be able to see what I'm doing wrong, so any help would be appreciated.

HTML:

<div class="fixed-header-container">
    <div class="logo">logo</div>
    <div class="links">links</div>
</div>

<div class="fixed-container">
    <img src="https://pbs.twimg.com/profile_images/599903869980823553/sNBE6oOk_400x400.jpg" />
</div>

<div class="scrolling-container">
    <div class="site-nav"> Site Nav</div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis quis elit facilisis consequat. Nunc libero nisi, sollicitudin     quis iaculis eget...
</div>

CSS:

.fixed-header-container { 
    position:fixed !important; 
    top:0;
    width: 100%;
    z-index: 15;
}

.fixed-container { 
    height:auto; 
    position:fixed !important; 
    top:0;
    width: 100%;
    z-index: 1;
}

.logo {
    background-color: red;
    width: 50%;
    float: left;
}

.links {
    background-color: yellow;
    width: 50%;
    float: left;
    text-align: right;
}

img {
    max-width:100%;
}

.scrolling-container {
    width:100%;
    padding-bottom: 50px;
    background: pink;
    z-index:10;
}

.site-nav {
    position:absolute;
    z-index:40;
    background-color: green;
    text-align: center;
    width: 40%;
    margin: 0 auto;
    height: 50px;
}

Upvotes: 0

Views: 109

Answers (2)

C3roe
C3roe

Reputation: 96325

z-index works on positioned elements only. Your .scrolling-container is not positioned.

.scrolling-container {
    position:relative;
    /* … rest of your styles */
}

http://jsfiddle.net/3w5dt/16/

Since you need the .site-nav to go above the fixed element on top as well, you could take it out of .scrolling-container, and then give it the same margin-top, as seen here: http://jsfiddle.net/3w5dt/17/

Upvotes: 2

Andrew
Andrew

Reputation: 127

Just use position: relative; on .scrolling-container.

Upvotes: 0

Related Questions