html - 滚动时灰度滤镜与导航栏重叠的图像

Question

我对此很陌生，并且在滚动时遇到图像重叠导航栏的问题。 仅当我在悬停时应用 -webkitfilter 灰度时才会发生这种情况。 如果我从样式表中删除它，一切都会恢复正常。

这里是:

.images {
color: darkgray;
font-size: 0.9rem;
filter: gray; 
-webkit-filter: grayscale(100%);

}

.images:hover {
filter: none; 
-webkit-filter: grayscale(0%);

}

网址是这样的:http://josefinaechenique.esy.es/musica.html

overlapping image

谢谢!!!

Answer 1

Html 在发现新元素时呈现重叠。

div {
  position: absolute;
  width: 100px;
  height: 100px;
}
#a {
  background: red;
  left: 10px;
  top: 10px;
}
#b {
  background: blue;
  left: 60px;
  top: 60px;
}

<div id="a"></div>
<div id="b"></div>

您可以使用 z-index 属性覆盖此行为。

div {
  position: absolute;
  width: 100px;
  height: 100px;
}
#a {
  background: red;
  left: 10px;
  top: 10px;
  z-index: 100;
}
#b {
  background: blue;
  left: 60px;
  top: 60px;
}

<div id="a"></div>
<div id="b"></div>

您需要在 #fixedbar 样式中添加 z-index: 999 或最好是更大的数字。