I am having an issue with a scroll effect where I cant get the links to work within the header because the \[code\]z-index\[/code\] has to be negative for the effect to work. The links are in the header. http://jsfiddle.net/ThAv5/4/HTML: \[code\]<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>\[/code\]And the CSS:\[code\]#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;}\[/code\]
Links and Z-Index
- Thread starter KC_Nikki
- Start date