html - 位置：固定不工作的html。怎么修？

Question

我从 StackOverflow 中找到了一些很好的 HTML 代码，我正在尝试将它们修改为一个网站，我的问题是即使我添加了位置，顶部菜单栏也没有修复：修复 -

window.onscroll = function() {
  changeOnScroll()
};

function changeOnScroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("Bar").style.width = scrolled + "%";
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.topmenu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.topmenu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topmenu a:hover {
  background: #ddd;
  color: black;
}

.main {
  margin-top: 50px;
}

.header {
  position: fixed;
  top: 40px;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

.bg-image {
  background-image: url("https://th.bing.com/th/id/OIP.5iMThpltwKo127uM2r1UsAHaDt?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  background-image: url("https://th.bing.com/th/id/OIP.IOe7MAzj_i96H8E7zbEhMAHaD6?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image2 {
  background-image: url("https://th.bing.com/th/id/OIP.3of4QJ65oynrDrNpgHYXTgHaD4?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text2 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="topmenu">
  <a href="#home">Home</a>
  <a href="#code">Gallery</a>
  <a href="#us">About</a>
</div>



<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="Bar"></div>
  </div>
</div>


<div class='main'></div>
<div class="bg-image"></div>

<div class="bg-text">
  <h2>html</h2>
  <h1>language</h1>
  <p>This is html</p>
</div>

<div class="bg-image1"></div>
<div class="bg-text1">
  <h2>css</h2>
  <h1>language</h1>
  <p>This is css</p>
</div>

<div class="bg-image2"></div>
<div class="bg-text2">
  <h2>js</h2>
  <h1>language</h1>
  <p>This is js </p>
</div>

这里有什么问题？如果你运行这个，当你滚动菜单顶部栏的位置时，即使它在代码中是固定的，它也不是固定的。有没有办法来解决这个问题？

标签： htmlcss

Answer 1

将 z-index 添加到.top-menu

.topmenu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
 z-index: 999;
}

window.onscroll = function() {
  changeOnScroll()
};

function changeOnScroll() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("Bar").style.width = scrolled + "%";
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.topmenu {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
 z-index: 999;
}

.topmenu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topmenu a:hover {
  background: #ddd;
  color: black;
}

.main {
  margin-top: 50px;
}

.header {
  position: fixed;
  top: 40px;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

.bg-image {
  background-image: url("https://th.bing.com/th/id/OIP.5iMThpltwKo127uM2r1UsAHaDt?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  background-image: url("https://th.bing.com/th/id/OIP.IOe7MAzj_i96H8E7zbEhMAHaD6?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image2 {
  background-image: url("https://th.bing.com/th/id/OIP.3of4QJ65oynrDrNpgHYXTgHaD4?pid=ImgDet&rs=1");
  background-attachment: fixed;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-text {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text2 {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 250%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="topmenu">
  <a href="#home">Home</a>
  <a href="#code">Gallery</a>
  <a href="#us">About</a>
</div>



<div class="header">
  <div class="progress-container">
    <div class="progress-bar" id="Bar"></div>
  </div>
</div>


<div class='main'></div>
<div class="bg-image"></div>

<div class="bg-text">
  <h2>html</h2>
  <h1>language</h1>
  <p>This is html</p>
</div>

<div class="bg-image1"></div>
<div class="bg-text1">
  <h2>css</h2>
  <h1>language</h1>
  <p>This is css</p>
</div>

<div class="bg-image2"></div>
<div class="bg-text2">
  <h2>js</h2>
  <h1>language</h1>
  <p>This is js </p>
</div>