This question has already been answered:

I made myself a hat, it turned out almost what I wanted. I wrote a block under the header, entered the text. Check, but it is not. Then he thought that he was under his hat. Put out padding 50 and found it. What kind of nonsense is constantly with these blocks, why did he not appear from the bottom of the cap?

@charset "UTF-8"; *{margin: 0;padding: 0;} header{background-color: #000; color:#91949f; min-height:30px; width:100%; position:fixed;} ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden;} li {float: left;} li a, .dropbtn, #profil a{color:#bbbab8;font-size:1.2em; display: inline-block; text-align: center; padding: 10px; text-decoration: none;} .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 100px; z-index: 1;} .dropdown-content a { color:gray;background-color:black; padding: 10px; text-decoration: none; display: block; text-align:center;} .dropdown-content a:hover {background-color:gray;color:#fff;} .dropdown:hover .dropdown-content {display: block;} li a:hover, #profil a:hover{background-color:#2e2f2f;color:#fff;} #profil{float:right;min-width:100px;} #tLogo{float: left;padding: 5px;} .osnova{padding:25px;background-color:gray;} 
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <meta charset="utf-8"> <title>TatuN</title> <link rel="stylesheet" type="text/css" href="style.css"/> <link href="T.png" rel="chortcut icon" type="image/x-icon"/> </head> <body> <header> <ul> <img id="tLogo" src="TTT.jpg" alt="ttt"/> <li><a href="#home">Главная</a></li> <li><a href="#links">Ссылки</a></li> <li><a href="#onas">Связь</a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Ярлыки</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> <div id="profil"> <a href="">Профиль</a> </div> </ul> </header> <div class="osnova"><h1>Тут будет контент страницы</h1></div> </body> </html>

Reported as a duplicate by members of aleksandr barakin , Pavel Mayorov , Community Spirit ♦ Jul 14 '17 at 15:51 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    4 answers 4

    Because you gave header position fixed, which essentially removes it from the stream, if you want to use position fixed on the header, by default you need to give a padding-top to all content on each page. Link to read about the flow of the document

      In addition to the answer above, I would say that you should use the main tag for semantic layout, for convenience, give your header fixed height, something like height: 100px; .
      And then just add to your style file main { padding-top: 100px;} , do not forget that the indentation must be at least the height of your header, otherwise the main content will climb under the header. Better yet, do not use padding , but use the margin , although there is no fundamental difference.

        If fixing is needed then add to the osnova class:

        position: relative; top: 42px;

          If you prescribe an element position: fixed or position: absolute, it removes this element from the general flow of the document. In this issue with an identical problem, you can find several solutions.