Как сделать `position: fixed` без последствий? [закрыт]

103

28 апреля 2021, 15:00

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 1 год назад.

Улучшить вопрос

Если я задаю моему горизонтальному меню position: fixed, то тогда все отступы начинаются с самого верхнего левого угла страницы. Получается так, будто этого меню и нет вовсе. Но это очень мешает мне при адаптации. Как сделать position: fixed так, чтобы он воспринимался как блок, и в том месте уже нельзя было размещать другие блоки, а только ниже?

Answer 1

/* The navigation bar */ 
.navbar { 
  overflow: hidden; 
  background-color: #333; 
  position: fixed; /* Set the navbar to fixed position */ 
  top: 0; /* Position the navbar at the top of the page */ 
  width: 100%; /* Full width */ 
} 
     
/* Links inside the navbar */ 
.navbar a { 
  float: left; 
  display: block; 
  color: #f2f2f2; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none; 
} 
     
/* Change background on mouse-over */ 
.navbar a:hover { 
  background: #ddd; 
  color: black; 
} 
     
/* Main content */ 
.main { 
  margin-top: 30px; /* Add a top margin to avoid content overlay */ 
}

<html> 
 
    <div class="navbar"> 
      <a href="#home">Home</a> 
      <a href="#news">News</a> 
      <a href="#contact">Contact</a> 
    </div> 
     
    <div class="main"> 
      <p>Some text some text some text some text..</p> 
    </div> 
 
</html>