CODEWITHSUNDEEP
htmlcss
George Reason
George Reason

Reputation: 173

Links and Z-Index

I am having an issue with a scroll effect where I cant get the links to work within the header because the z-index has to be negative for the effect to work. The links are in the header.

EDIT Sorry I wasnt clear enough, the links in the header area (green) are not active because of the z-index properties giving the header area a negative index it makes the links not active so I was wondering a fix for it

http://jsfiddle.net/ThAv5/4/

HTML: 

<body>
<div id="container">
    <div id="navBar"></div> 
    <div id="headerBar"></div>
    <div id="mainContent"><h1>This is the main content</h1></div>
</div>
</body>

And the CSS:

#navBar{
    position:fixed;
    top: 0;
    left:0;
    width: 100%;
    z-index:1000;
    -moz-box-shadow: 0 0 5px #000000;
    -webkit-box-shadow: 0 0 5px #000000;
    box-shadow: 0 0 5px #000000;
    background:red;
    height:50px;
}

#headerBar{
    top: 0;
    height: 250px;
    left: 0;
    right: 0;
    margin:0px auto;
    width:100%;
    position: fixed;
    z-index:-1000;
    background:green;
}

#mainContent{
    overflow: auto;
    z-index: 0;
    margin-top: 250px;
    width:100%;
    height:900px;
}

body, #container{
    background:yellow;
}

Upvotes: 0

Views: 173

Answers (2)

Vimal Stan
Vimal Stan

Reputation: 2005

Since there are no links in the code you've provided, I'm assuming that the links are in the "headerBar" div. If that's the case, you're not able to click them because they will appear under the "navBar" div because of the styles you've provided.

If this is the effect you want, then specify a margin or padding for the "headerBar" div, that will allow you to push the links below the "navBar".

Upvotes: 2

Pankaj Phartiyal
Pankaj Phartiyal

Reputation: 1691

Actually #navBar overlaps #headerBar and so #headerBar content is not visible. It should be below #navBar whose height is 50px. So set top offset of #headerBar to 50px

#headerBar {
top:50px;
}

Fiddle

Upvotes: 1

Related Questions