Не могу зафиксировать шапку

342

06 января 2017, 08:52

Есть страница

Есть шапка с такой версткой

<div class="fixed_header">
  <div class="grey" style=" background-color:#f8f8f8; opacity:1;">
  </div>
</div>

style

.fixed_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* Любое положительное значение */
}

Но контентная часть не хочет идти после шапки. В чем проблема?

Answer 1

Потому что блок .fixed_header находится не в потоке документа, из-за этого идет смещение контентной части. Для решения проблемы блок .fixed_header нужно обернуть еще в один и задать ему фиксированную высоту, чтобы он занимал пространство, отведенной для .fixed_header:

<div class="header"> 
    <div class="fixed_header">
        <div class="grey"></div>
    </div>
</div>
.header {
   height: 217px; /* Высота вашего фиксированного хедера */
}

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