fixed relative container i am confused how to do this - html

Question

I have big doubt about fixed, relative , absolute container
I have a css code like this
.header {
position:fixed;
width:100%;
height:60px;
}
.page, .footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
}
and my html code like this...
<div class="header">--fixed content--</div>
<div class="page">--page content</div>
<div class="footer">--footer content--</div>
I have used bootstrap for button styles. problem is the header div is fixed but the content inside the page & footer goes over the header content. When I remove position:relative; from page & footer css it works fine. But also bootstrap buttons goes still goes up.

Answer 1

try this:
.header {
position:fixed;
width:100%;
height:60px;
background: black;
color: white;
top: 0;
left: 0;
z-index: 10;
}
.page {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #999;
height:500px;
color: white;
padding-top: 60px;
margin: auto;
}
.footer {
position:relative;
width: 80%;
min-width: 980px;
max-width: 1366px;
background: #666;
height:100px;
color: white;
margin: auto;
}
Fiddle Example
Adding a z-index will keep your header always on top of other content. You can change its value as per your content.
add the padding-top to your '.page' to avoid any overlapping of header on the body content.

Answer 2

You should be using like this:
.header {
position:fixed;
width:100%;
height:60px;
z-index: 99999999;/*adding higher index value than other divs*/
/* This will ensure the header div always on top of other divs */
}
.page{
position: relative;
top: 61px;/* plus 1px height as of .header or use as per your requirement */
/* but at least this should be 60px to show your .page div */
}
Then, just other divs you don't need to define the top value for this issue(overlaps).