Hide scrollable content behind transparent fixed position divs when scrolling the page?

Question

I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent).

I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).

This is very hard to explain, so I did the best I could.

html:

<div id="header">     <div id="topmenu">Home | Find Feeds | Subscriptions</div> </div> <div id="container">     <div id="content">         testing     </div> </div> 

css:

#header {     margin:0 auto;     position: fixed;     width:100%;     z-index:1000; } #topmenu {     background-color:#0000FF;     height:24px;     filter: alpha(opacity=50);     opacity: 0.5; }  #leftlinks {     padding: 4px;     padding-left: 10px;     float: left; }  #rightlinks {     padding: 4px;     padding-right: 10px;     float: right; }  #containerfixedtop {     width: 100%;     height: 20px; }  #contentfixedtop {     margin: 0 auto;     background-color: #DAA520;     width: 960px;     height:20px; }  #container {     position: relative;     top: 68px;     width: 100%;     height: 2000px;     overflow: auto; }  #content {     margin: 0 auto;     background-color: #DAA520;     width: 960px;     height: 2000px; } 

Here's a screenshot of the problem:

Answer 1

Just coming to this late, but in case anyone else runs across this in the future, here's your fix.

Your CSS Code:

.wrapper {     width:100%;     position:fixed;     z-index:10;     background:inherit; }  .bottom-wrapper {     width:100%;     padding-top:92px;     z-index:5;     overflow:auto; } 

Your HTML:

<div class="wrapper">     ...your header here... </div> <div class="bottom-wrapper">     ...your main content here... </div> 

This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header. Your .bottom-wrapper padding-top should be the height of your header wrapper's content.

Cheers!