Div над другим div, но должен прокручиваться ниже

существует div (а именно div_fixed), который фиксируется в позиции. Другой div а именно other_content находится под div_fixed. other_content div имеет свойство padding-top, так что при прокрутке страницы прокручивается только other_content под фиксированным div.

Скрипка здесь

HTML:

<div class="div_fixed">FIXED</div>
<div class="other_content">
    content goes here<br/>
    content goes here<br/>
    content goes here<br/>
</div>

CSS

     div { color: #fff }
        .div_fixed { position: fixed;  
    width: 100%; 
    height: 100px; 


    }

.other_content { 
background: #f00; 
height: 5000px; 
color: #fff; 
padding-top: 100px; 

margin:0 auto;

}

Но я хочу, чтобы нефиксированный div оставался на фиксированном div и хотел, чтобы нефиксированный div исчез только под его верхним краем, т.е. положение нефиксированного верхнего края div останется фиксированным, но содержимое начнет исчезать на странице прокручивается так, как это было, когда он находился под фиксированным div.

Итак, у меня было небольшое редактирование в html (всего 2 разрыва) перед нефиксированным div:

    <div class="div_fixed">FIXED</div>
<br><br/>
        <div class="other_content">
            content goes here<br/>
            content goes here<br/>
            content goes here<br/>
        </div>

Добавление в css:

  .fixed_div{

    z-index:-1;
    }

    .other_content{


    width:60%;
    z-index:99099900;


    }

Но верхний край нефиксированного div не остается в позиции, которую я хочу.

Как это сделать?

ИЗМЕНИТЬ:

Предположим, что я добавляю фоновое изображение для нефиксированного div. Возможно ли, что часть фонового изображения фиксированного div, по которому прокручивается другой div, будет иметь z-index выше, чем у нефиксированного div? Будет ли проблема решена таким образом?

EDIT2

Предположим, что fixed_div является заголовком, other_content является тегом содержимого веб-страницы. Добавим нижний колонтитул div с id footer. Ни один свиток не должен присутствовать в other_content. other_content должен прокручиваться при прокрутке страницы.

Ответы

.div_fixed{
    height:100px;
    width:100%;    
    position:fixed;
    top:0;
    left:0;
    background:#ff0;
    z-index:500;
}
.other_content {
    width:60%;    
    background:#0ff;
    margin-top:100px;
    z-index:600;
    position:relative;
}
​
​

<div class="div_fixed">FIXED</div>
<div class="fixed_container">
    <div class="other_content">
        content goes here<br/>
        content goes here<br/>
        content goes here<br/>
    </div>
</div>

.fixed_container {
    position: fixed;
    overflow: auto;
    top:30px;
    width: 100%;
    height: 5000px;
    z-index:10; }

.other_content { position: absolute; }