При фиксации блока он перекрывает другой и уезжает влево

Рейтинг: 0Ответов: 1Опубликовано: 13.10.2014

Всем доброго времени суток!
Возникла вот такая проблема:
На сайте в шапке два блока. Один хочу зафиксировать. Если я ставлю position:relative, то отображается как надо. Если relative меняю на fixed, то второй блок поднимается в самый верх и залазит под первый (который зафиксирован). Если указать margin, то опускаются почему-то оба блока! В фаербаге всё это видно. Но не пойму, почему так!
Сайт http://recenzo.ru/
Заранее всем спасибо!

css html форматирование шаблоны разметка
Источник: Stack Overflow на русском

Ответы

▲ 2

http://jsfiddle.net/zqvwyabg/

HTML:

<div class="block-fixed">Block fixed</div>
<header>HEADER</header>

CSS

*{
    padding: 0;
    margin: 0;
}
body{
    font-family: 'Segoe UI';
    font-size: 20px;
     color: #fff;
}
.block-fixed{
    width: 100%;
    background: #008000;
    position: fixed; top: 0; left: 0;
    height: 50px;
    text-align: center;   
    line-height: 50px;    
}

header{
    background: #ccc;
    min-height: 3000px;
    margin-top: 50px;
    text-align: center;
    font-weight: 700;
}