Элемент, закрепленный в верхней части страницы на прокрутке

Question

Как вы можете видеть на скриншотах, у меня есть элемент <audio>, который остается в верхней части страницы прокрутки. Но я хочу, чтобы элемент был видимым до начала прокрутки.

Я не могу заставить это работать без беспорядочного javascript, удаляющего элемент и добавляя его как дочерний элемент в прокрутку, любые идеи?

http://jsfiddle.net/bobbyrne01/772yerga/1/

html ..

<div class="header"> 
    <audio controls> 
     Your browser does not support the audio element. 
    </audio> 
</div> 
<div class="outer"> 
    <span class="banner">LOGO</span> 
    <div class="header">Header</div> 
</div> 
<div class="content">Content</div> 

css ..

.header { 
    background-color: #ccc; 
    width: 100%; 
    position: fixed; 
    top: 0; 
    bottom: auto; 
} 
.outer { 
    background-color: #fff; 
    position: relative; 
    height: 100px; 
} 
.outer .banner { 
    font-size: 46px; 
} 
.outer .header { 
    position: absolute; 
    bottom: 0; 
    z-index: 2; 
    top: auto; 
} 
.content { 
    height: 1500px; 
    color: blue; 
    background-color: #fff; 
    margin-top: 100px; 
} 

Перед свитка ..

После свитка ..

Answer 1

Я изменил z-index заголовка до 99, чтобы остаться на вершине - свитки содержания под ним. И добавил top: 50px; к наружному - для начала немного ниже

Демо: http://jsfiddle.net/v2oyjpkg/

.header { 
     background-color: #ccc; 
     width: 100%; 
     position: fixed; 
     z-index: 99; 
    } 
    .outer { 
     background-color: #fff; 
     position: relative; 
     height: 100px; 
     top: 50px; 
    } 
    .outer .banner { 
     font-size: 46px; 
    } 
    .outer .header { 
     position: absolute; 
     bottom: 0; 
     z-index: 2; 
     top: auto; 
    } 
    .content { 
     height: 1500px; 
     color: blue; 
     background-color: #fff; 
     margin-top: 100px; 
    }