There are 2 blocks, a <header> that goes to the full width of the window and another block goes under it, but at header position: fixed and the second block is located under the first one, but must be under it. How to solve this issue?

 header { top: 0; right: 0; position: fixed; background: url("image/banner.jpg") no-repeat center top / cover; background-size: auto cover; width: 100%; height: 974px; } 
 <header> <div class="container"> <div class="heading clearfix"> <img src="image/logo.png" alt=" logo" class="logo"> <input type="checkbox" id="menu-checkbox"> <nav role="navigation"> <label for="menu-checkbox" class="toogle-button" data-open="Меню" data-close="Закрыть" onclick></label> <ul class="menu"> <li><a href="#">Домой</a></li> <li><a href="#">Портфолио</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </div> </div> </header>

  • see css property z-index . - And
  • And the second block HHHDE? - Air

1 answer 1

If I understood correctly, then your second block should be above the fixed header. For this, the second block should be set to position: relative and specify z-index . An example of this:

 <!DOCTYPE html> <html> <head> <style> header { width:100%; height:200px; background:green; position:fixed; top:0px; left:0px; } #secondBlock { width:80%; height:250px; background:red; position:relative; z-index:100; } </style> </head> <body> <header> </header> <div id="secondBlock"> </div> </body> </html>

It will be like this: enter image description here

  • Thanks, returned. I didn’t quite understand what was wrong there, but decided to remove it so as not to confuse people. - dTi