Hello, I can not solve the problem. Created a header with a fixed position, after it comes a block with animation.
If the header occupies some part of the block with animation and it is activated, then the animation overlaps the header .

How can I solve this problem?

file test.html :

 body { margin: 0; } .header { width: 100%; background-color: white; position: fixed; font-size: 15pt; font-family: 'stand'; border-bottom: 1px black solid } .headerdown { margin-right: 6%; margin-left: 6%; width: 87%; } .header .headerdown table { width: 70%; float: right; height: 100%; } .header .headerdown table .stand { width: 18.5%; height: 45px; text-align: center; border-top: 1px white solid; border-bottom: 1px white solid; transition-duration: 1s; } .header .headerdown table .Nstand { width: 26%; height: 45px; text-align: center; border-top: 1px white solid; border-bottom: 1px white solid; transition-duration: 1s; } .menu { font-family: 'stand'; float: right; width: 230px; padding-right: 15px; padding-top: 100px; } .menu ul { font-size: 14pt; list-style: none; padding: 0; } .menunews { transition-duration: 0.5s; margin-top: 20px; } .menunews:hover { transition-duration: 0.5s; transform: translateX(-10px); } .menunewstext { text-align: center; font-size: 16pt; margin-top: 7px; } .menunewstext a { color: black; } .menu li img, .img { border-radius: 8px; margin: 0 auto; height: 100px; width: 150px; } .menu li {} .maincontent { font-family: 'stand'; margin: 0 auto; max-width: 960px; min-height: 1000px; padding-bottom: 50px; padding-top: 100px; padding-right: 230px; } 
 <div class="header"> <div class="headerdown"> <div> </div> <div class="htable"> <table> <tbody> <tr> <td class="stand"><a href="technologies.php">Технологии</a></td> <td class="stand"><a href="serialsfilms.php">Кино и Сериалы</a></td> <td class="stand"><a href="studybooks.php">Учеба и Книги</a></td> <td class="stand"><a href="health.php">Здоровье</a></td> <td class="Nstand"><a href="life.php">Повседневная жизнь</a></td> </tr> </tbody> </table> </div> </div> </div> <div class="menu"> <h2>Популярные статьи:</h2> <ul> <li> <div class="menunews"> <a href=""> <div class="img"><img src=""></div> <div class="menunewstext"><a href="">Статья 1</a></div> </div> </li> </ul> </div> <div class="maincontent"> </div>

  • First, lay out the code that can be played. - excellproj
  • Where is the animation? - Air
  • For this, the position and z-index properties exist - DaemonHK
  • In order for the issue to be resolved, you need to insert the code with the problem, and not just a piece, there is not any animation and the problem is not visible, well, or am I blind - Air
  • Sorry, not animation, but transition, there in the css file: "transition: 0.6s linear;" - Alex3214

0