фиксированных относительный контейнер я путаюсь, как это сделать

Question

У меня есть большие сомнения, о fixed, relative, absolute контейнера

У меня есть css код, как этот

.header { 
position:fixed; 
width:100%; 
height:60px; 
} 
.page, .footer { 
position:relative; 
width: 80%; 
min-width: 980px; 
max-width: 1366px; 
} 

и мой html код, как это. ..

<div class="header">--fixed content--</div> 
<div class="page">--page content</div> 
<div class="footer">--footer content--</div> 

Я использовал bootstrap для стилей кнопок. проблемой является header div - fixed, но содержимое внутри page & footer передает содержимое заголовка. Когда я удаляю position:relative; от page & footer css это прекрасно работает. Но также bootstrap buttons по-прежнему идет вверх.

Answer 1

попробовать это:

.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

Добавление Z-индекс будет держать ваш заголовок всегда поверх другого контента. Вы можете изменить его значение в соответствии с вашим контентом. добавьте padding-top к вашей '.page', чтобы избежать перекрытия заголовка содержимого тела.

Answer 2

Вы должны использовать так:

.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 */ 
} 

Тогда просто другие дивы вам не нужно определить верхнее значение для данной проблемы (перекрывает).