Prem.G Prem.G - 6 months ago 13
CSS Question

fixed relative container i am confused how to do this

enter image description hereI 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

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.