There is a page

There is a hat with this typesetting

<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; /* Любое положительное значение */ }

But the content part does not want to go after the cap. What is the problem?

    1 answer 1

    Because the .fixed_header block is not in the document stream, because of this, the content part is shifted. To solve the problem, the .fixed_header block .fixed_header to be wrapped into another one and set a fixed height for it to occupy the space reserved for .fixed_header :

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

    You can also directly set the margins to the content part itself, however, the first option is more correct, because it is designed that the header may not exist at all or it may change.

    • I do not agree with "the first option is more correct, because it is intended that the header may not exist at all or it may change. ". Equivalent options, since in the first case you will have to change or delete the height , and in the second - the margin-top . Only in the second case will not have to wrap in the header . - Vadim Ovchinnikov
    • Just with the first option, you can remove the header with the wrapper, but with the second, you will need to not only remove the header, but also interrupt the styles to the main content. - Vadizar
    • In the second option, simply remove the margin-top and everything (if the content is in one block). Of course, depends on the markup. - Vadim Ovchinnikov