Скрыть прокручиваемый контент за прозрачными блоками div с фиксированной позицией при прокрутке страницы?

У меня есть заголовок div с фиксированной позицией. Проблема в том, что когда я прокручиваю страницу, содержимое страницы отображается за заголовком (заголовок прозрачный).

Я много знаю о css, но не могу понять этого. Я пробовал установить переполнение на скрытый, но знал, что это не сработает (и не вышло).

Это очень сложно объяснить, поэтому я сделал все, что мог.

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

Вот скриншот проблемы: