How can I do that? For example, here http://circeya.ru/ this is implemented in the header. If you make a fixed cap, it just stays in place with any scrolling.

  • And if you make the z-index for the header less than the rest of the content? - lexxl
  • @Alexander, If you are given an exhaustive answer, mark it as correct (ticked off the selected answer). - Mihanik71
  • @ Alexander, are you from Belgorod? - Mihanik71

2 answers 2

In this case, the block with the image in the header is set to position:fixed when scrolling the page from 0 to 240 top of the block changes after scrolling the page. The Z-index of the block with the image and the blocks with the text is the same, but the blocks with the text are located below the tree and thus smoothly overlaps the block with the image when scrolling.

    The first block of section.main is position: fixed; and height height: 871px;
    The second block after section.chance has an upper indent by the same margin-top: 871px; z-index as already said the same. That's the whole secret

     <style> header { position: fixed; height: 100px; } .layout { margin-top: 100px; position: relative; background-color: #fff; } </style> <header> бла-бла-бла... </header> <div class="layout"> бла-бла-бла... </div>