Имеется страница, состоящая из двух основных блоков (.header и .main). У блока .header установлен position: fixed
Проблема состоит в том, что блок .main впадает в блок .header. Т.е. заезжает под блок .header
body { margin: 5px; }
.header {
position: fixed;
left: 5px;
right: 5px;
top: 5px;
height: 48px;
background-color: white;
box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red;
}
.main {
height: 120px;
background-color: white;
box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue;
}
Эту задачу можно решить, добавив ещё один блок такой же высоты, как и .header. Но это не подойдёт, так как в течении всего времени .header может изменять свою высоту (с помощью скрипта, изменением ширины и т. д.). При этом .main так же должен оставаться под .header, а он снова впадёт.
$(function() {
var $header = $('.header');
setInterval(function() {
$header.animate({height: 96 + 'px'}, 400);
setTimeout(function() {
$header.animate({height: 48 + 'px'}, 400);
}, 800);
setTimeout(function() {
$header.css({height: 'auto'}).animate({right: 80 + '%'}, 400);
setTimeout(function() {
$header.animate({right: 5 + 'px'}, {
duration: 400,
complete: function() {
$header.css({height: 48 + 'px'})
}
});
}, 800);
}, 2600);
}, 5200);
});
body { margin: 5px; }
.header {
position: fixed;
left: 5px;
right: 5px;
top: 5px;
height: 48px;
background-color: white;
box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red;
}
.main {
height: 120px;
background-color: white;
box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue;
}
.displacer {
height: 48px;
background-color: white;
box-shadow: inset 2px 2px 0px green, inset -2px 2px 0px green, inset 2px -2px 0px green, inset -2px -2px 0px green;
visibility: hidden;
}
В общем, вот:
.header может изменять размер, но при этом, .main всё равно должен
оставаться под ним.
.header должен оставаться на своём месте - сверху страницы с position: fixed
Как решить данный вопрос?
Ответ
Создайте точно такой же элемент только добавьте ему position: static; и visibility: hidden; (что позволит занимать нужное место, но не отображать элемент).
.a,
.b {
width: 100%;
height: 20px;
}
.a {
background: red;
position: absolute;
}
.b {
background: blue;
}
.a-clone {
position: static;
}
Я не должен быть под красным блоком :с
Те же вещи можно делать и с помощью Javascript и также задавать этому "клону" нужные margin при необходимости (для соответствующих значений top и left абсолютно позиционированного элемента).
Обновление
Если содержимое блока будет динамически меняться, то можно с помощью Javascript добавить обработчик изменения размеров самого блока, где присваивать новые значения размеров блока "клону" блока со статическим поционированием.