HTML 固定 header 失败 ID 使用

Question

我的 html 代码有问题我引用了 id 类，但它不会去那里，而是去另一个规则。我认为问题与固定 header 有关，但我找不到解决方案。这是我的 html 代码:

/* general */

html {
  width: 100%;
  height: 100%;
  position: relative;
}
body {
  width: 100%;
  margin: 0;
  height: 100%;
  position: relative;
}
/* header */

header {
  position: fixed;
  z-index: 2;
  top: 0;
  background-color: red;
  width: 100%;
  height: 125px;
  padding: 1em;
}
.spacer {
  position: relative;
  width: 100%;
  height: calc(125px + 2em);
}
header h1 {
  margin: 0;
}
/* bar */

header p {
  margin-bottom: 0;
}
/*menu*/

header li {
  float: left;
  display: block;
  background-color: white;
  padding: 2px;
  list-style-type: none;
  margin-top: 0 !important;
  margin: 1em;
}
/* middle */

.middle {
  left: 0;
  float: left;
  padding: 2em 4em;
  background-color: lightgreen;
}
.middle p {
  margin: 0;
}

<header>
  <h1> HTML </h1>
  <p>On the menu today:</p>
  <ul>
    <li><a href="#1">Number 1 </a>
    </li>
    <li><a href="#2">Number 2 </a>
    </li>
    <li><a href="#3">Number 3</a>
    </li>
    <li><a href="#4">Number 4</a>
    </li>
  </ul>
</header>
<div class="spacer">&nbsp;</div>
<div class="middle">
  <p id="1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
    purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
    amet, elementum nisi.
    <br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
    consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
    Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
    et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
  <br>
  <p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
    nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
    in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
    <br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
    et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
    Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
  <br>
  <br>
  <br>
  <p id="3">
    Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
    et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
    Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
    lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
  </p>
  <br>
  <p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
    at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
    In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
    In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
    <br>
  </p>
</div>
<footer>
</footer>

Answer 1

您的 spacer div 似乎位于页眉之上。如果你给你的标题一个 z-index 链接再次工作:

/* general */

html {
  width: 100%;
  height: 100%;
  position: relative;
}
body {
  width: 100%;
  margin: 0;
  height: 100%;
  position: relative;
}
/* header */

header {
  position: fixed;
  top: 0;
  background-color: red;
  width: 100%;
  height: 125px;
  padding: 1em;
  z-index:2;
}
.spacer {
  position: relative;
  width: 100%;
  height: calc(125px + 2em);
}
header h1 {
  margin: 0;
}
/* bar */

header p {
  margin-bottom: 0;
}
/*menu*/

header li {
  float: left;
  display: block;
  background-color: white;
  padding: 2px;
  list-style-type: none;
  margin-top: 0 !important;
  margin: 1em;
}
/* middle */

.middle {
  left: 0;
  float: left;
  padding: 2em 4em;
  background-color: lightgreen;
}
.middle p {
  margin: 0;
}

<header>
  <h1> HTML </h1>
  <p>On the menu today:</p>
  <ul>
    <li><a href="#1">Number 1 </a>
    </li>
    <li><a href="#2">Number 2 </a>
    </li>
    <li><a href="#3">Number 3</a>
    </li>
    <li><a href="#4">Number 4</a>
    </li>
  </ul>
</header>
<div class="spacer">&nbsp;</div>
<div class="middle">
  <p id="1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut fermentum, odio in vehicula placerat, lacus sapien auctor lectus, id tempor dui mauris luctus odio. Maecenas a ex aliquet, lobortis mauris ut, fermentum nulla. Suspendisse dignissim placerat
    purus. Etiam feugiat, erat at rhoncus rutrum, nulla mi ornare justo, a sagittis tortor metus non augue. Fusce vel molestie dolor. Etiam congue a ipsum eu interdum. Pellentesque cursus lobortis leo eu euismod. Sed et ante pharetra, posuere lectus sit
    amet, elementum nisi.
    <br>Sed at felis eu nulla pulvinar sagittis quis ut libero. Praesent bibendum lacus a turpis elementum, nec ultrices turpis placerat. Nullam egestas, purus pharetra faucibus elementum, odio arcu faucibus purus, ac suscipit arcu eros eget felis. Nulla
    consequat rhoncus turpis, vitae porta velit semper et. Duis commodo vehicula ipsum, non fermentum lectus pellentesque a. Donec ut luctus leo, iaculis tristique tellus. Sed pharetra turpis mattis orci sodales aliquam. Praesent aliquam cursus sagittis.
    Morbi eget convallis mi. Donec lacinia orci euismod hendrerit venenatis. Vivamus vel ex a odio consectetur tincidunt sed sed leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent pretium felis
    et ex laoreet congue. Nulla vitae dolor ligula. Aenean mollis consectetur posuere.</p>
  <br>
  <p id="2">Quisque lacinia, orci consequat volutpat imperdiet, ipsum massa molestie ante, posuere laoreet elit mauris in ante. Sed suscipit felis sagittis nunc pellentesque, vel ullamcorper orci pharetra. Aenean hendrerit commodo velit, ut tincidunt lectus mattis
    nec. Nunc dictum turpis sed gravida semper. Mauris dignissim risus sed porta pulvinar. Curabitur ex enim, vehicula sit amet tincidunt et, dignissim vel urna. Maecenas magna magna, venenatis at lectus a, ornare consequat massa. Pellentesque vitae ligula
    in augue faucibus pellentesque. Duis sed tellus vel risus mattis convallis id ut ex. Ut ipsum ex, dignissim nec lectus in, pellentesque euismod lorem. Suspendisse ut mauris molestie ex dignissim dictum. Duis vitae volutpat nisl, vel efficitur nulla.
    <br>Maecenas justo est, elementum et velit in, consequat ullamcorper mi. Nullam nec efficitur turpis. Aenean semper mi gravida, tempor lectus in, pellentesque tortor. Quisque porta risus sit amet sem dictum, vel pretium massa maximus. Etiam mattis nulla
    et dictum malesuada. Pellentesque vitae magna sed augue ultricies consequat. Aenean tellus ante, sodales id laoreet vitae, commodo facilisis nulla. In nec lorem turpis. Morbi semper libero risus, eget aliquet sem porttitor eu. Nunc nec ultricies ex.
    Morbi elementum mattis ante et pharetra. Nulla dignissim congue augue aliquam ultricies. Aliquam iaculis quam eu arcu vestibulum, eu consectetur odio porttitor. Phasellus placerat sem pellentesque ex dictum auctor.</p>
  <br>
  <br>
  <br>
  <p id="3">
    Mauris nisl velit, tristique auctor nunc id, cursus fringilla arcu. Donec faucibus dolor sit amet leo volutpat, eget pellentesque neque porta. Phasellus sagittis lacus a eros pulvinar, a aliquam diam venenatis. In a lacinia sem. Phasellus mollis vel velit
    et fermentum. Sed tellus dui, aliquam in velit et, consectetur placerat dui. Etiam elementum, lectus eget commodo condimentum, urna enim placerat velit, eu rhoncus mauris lacus non nisl. Aliquam lorem mi, aliquam sed blandit at, ornare quis lacus.
    Maecenas nec maximus metus. Integer sem lorem, posuere id nunc non, laoreet efficitur neque. Duis sit amet massa vitae est porttitor tempor a non ex. Cras pharetra enim dictum justo mattis lobortis. Maecenas viverra, ipsum ut pretium mattis, risus
    lectus malesuada augue, ac eleifend orci nisl sit amet augue. Nam quis metus finibus, sagittis leo id, tincidunt nisi. Pellentesque non feugiat elit, sed viverra erat.
  </p>
  <br>
  <p id="4">Nullam mollis, felis non egestas malesuada, ante nunc elementum massa, id scelerisque nulla augue vel felis. Aliquam hendrerit justo mattis augue pretium, at imperdiet lorem rhoncus. Cras sodales a arcu vel tempus. Donec semper nibh ut enim lobortis,
    at euismod dui finibus. Duis lacinia tellus augue, eu mollis nibh varius in. Nulla in mi porta, mattis diam id, bibendum felis. In hac habitasse platea dictumst. Mauris nec accumsan diam. Duis pulvinar tortor in enim rutrum, et dapibus lacus hendrerit.
    In hac habitasse platea dictumst. Donec ut mauris sed lacus dictum commodo. Suspendisse nec lorem eget nisi tristique interdum id nec est. Phasellus nec magna fringilla, cursus ligula quis, consequat leo. Phasellus in blandit leo, non vestibulum justo.
    In nec velit sit amet arcu hendrerit commodo id in risus. Etiam mi urna, hendrerit malesuada quam eget, sagittis fermentum dui.
    <br>
  </p>
</div>
<footer>
</footer>