headerfixed

by bobbyrne01

HTML

<div class="header">
    <audio controls>
        Your browser does not support the audio element.
    </audio>
</div>
<div class="outer">
    <div class="header"></div>
</div>
<div class="content">
    Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
        Song 1<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 2<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    Song 3<br/>
    
</div>

CSS

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