Проблемы с перекрывающимся липким заголовком (перекрывает основной контент под ним)

Question

За последние несколько дней я следовал различным учебным пособиям, и у меня возникают проблемы с тем, что (липкий) заголовок перекрывает содержимое под ним, когда моя страница прокручивается вертикально.

Это на всех страницах этого тестового сайта.

---

HTML>

<header>
  <div id="nav">
    <ul>
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="collection.html" title="Collection">Collection</a></li>
      <li><a href="shop.html" title="Shop">Shop</a></li>
      <li><a href="faq-policies.html" title="Frequently asked questions and policies">FAQ/Policies</a></li>
      <li><a href="contact.php" title="Contact">Contact</a></li>
    </ul>
    </li>
    </ul>
    <br class="clearboth"/>
  </div>
</header>
<br>
<div class="table">

CSS>

header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: fixed;
    z-index: 10;
}

.table {
    margin-left: 75px;
    text-decoration: none;
    margin-top:300px;
}

Answer 1

На самом деле вы были почти там с вашим кодом, как это было. Вам просто нужно придать заголовку цвет фона, так как он прозрачен по умолчанию, а также дать ширину 100%. Тогда прокручиваемый контент исчезнет за ним.

Также лучше привести в порядок его, установив поле для тела и отступ до нуля. Так что добавьте это в свой CSS:

body{
    margin: 0;
    padding: 0;
}

header {
    background: white;
    width: 100%;
}

Это достигнет того, чего вы хотите изначально. Теперь, однако, приходит интересный момент, который большинство людей пропускают. Я не совсем уверен, почему вы дали таблице div поле 300px, так как это намного больше, чем вам нужно. Но не устанавливайте это в пикселях вообще! Потому что использование фиксированных измерений означает, что, как только слабовидящий пользователь, работающий с масштабированием только по тексту (многое зависит от браузера), увидит страницу, заголовок будет перекрывать содержимое, скрывая его, тем самым отменяя всю вашу тяжелую работу! Используйте их единицы.

Меню в вашем примере состоит из 5 строк, плюс есть пустая строка выше и еще две или три ниже, поэтому разрешите всего 9em для заголовка (вы выбираете значение в соответствии с тем, насколько высок ваш последний заголовок), и делаете это:

.table {
    margin-top: 9em;   /* instead of 300px */
}

Теперь, независимо от того, какой масштаб текста использует пользователь, верхнее поле вашего контента будет соответственно расти, и контент всегда будет начинаться чуть ниже заголовка.

Answer 2

Добавьте ниже CSS в ваш верхний класс заголовка:

z-index: 99;

Как:

<header style="z-index:99">
  <div id="nav">
    <ul>
      <li><a href="index.html" title="Home">Home</a></li>
      <li><a href="collection.html" title="Collection">Collection</a></li>
      <li><a href="shop.html" title="Shop">Shop</a></li>
      <li><a href="faq-policies.html" title="Frequently asked questions and policies">FAQ/Policies</a></li>
      <li><a href="contact.php" title="Contact">Contact</a></li>
    </ul>
    </li>
    </ul>
    <br class="clearboth"/>
  </div>
</header>