图片：不透明度悬停在我的固定标题后面？答案

【问题标题】：image:hover with opacity not staying behind my fixed header?图片：不透明度悬停在我的固定标题后面？
【发布时间】：2021-08-10 17:33:30
【问题描述】：

我在尝试解决问题时遇到了麻烦。我为“图像：悬停”添加了一些不透明度，但是激活后它似乎覆盖了我的固定标题。我尝试将标题放在“z-index：0;”上以及“z-index; -1”上的图像，但仍然没有运气。

（请注意，这项工作仍在进行中......）

提前致谢

Here is a screenshot to show what I mean

body {
  background: black;
  color: white;
  font-family: monospace;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  background: rgb(247, 40, 40);
  margin: 0;
  z-index: 0;
}

.nav-link,
.project-title,
p {
  text-align: center;
}

#welcome-section {
  width: 100%;
  height: 100vh;
}
h1 {
  padding-top: 140px;
  text-align: center;
  font-size: 80px;
  margin-bottom: 0;
}
.sub-title {
  text-align: center;
}
a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}
#proj-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.proj-img {
  max-height: 20em;
  margin: 0 20px;
  z-index: -1;
}

.proj-img:hover {
  opacity: 60%;
}

@media (max-width: 400px) {
  h1 {
    font-size: 15px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=
    , initial-scale=1.0"
    />
    <title>Maria Castro | Portfolio</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav id="nav-bar">
        <a class="nav-link" href="#projects">Work</a>
        <a class="nav-link" href="#contact">Contact</a>
      </nav>
    </header>
    <section id="welcome-section">
      <h1>Hi, I'm Maria Castro.</h1>
      <p class="sub-title">Junior Front End Developer</p>
    </section>
    <section id="projects">
      <h2 class="project-title">My work</h2>
      <div id="proj-flex">
        <div id="project-1" href="#">
          <a href="https://ki05u.csb.app/" target="_blank">
            <img class="proj-img" src="images/weatherapp1.jpg" />
          </a>
          <p>Weather Widget</p>
        </div>
        <div id="project-2">
          <a
            href="https://codepen.io/mariaalouisaa/full/rNyLjYa"
            target="_blank"
            ><img class="proj-img" src="images/techdoc.jpg" />
          </a>
          <p>Technical Doc</p>
        </div>
        <div id="project-3" href="#">
          <a href="https://rzgbb.csb.app/" target="_blank"
            ><img class="proj-img" src="images/weatherapp2.jpg"
          /></a>
          <p>Weather App</p>
        </div>
      </div>
    </section>
    <section id="connect">
      <a class="connect-link" id="profile-link" href="#">LinkedIn</a>
      <a class="connect-link" href="#">FCC</a>
      <a class="connect-link" href="#">Codepen</a>
    </section>
  </body>
</html>

【问题讨论】：

我尝试了您的示例，即使添加了正确的图像，但我无法重现您的问题。如果可以添加问题的屏幕截图真的会有所帮助。谢谢:)
嗨 Vijay，感谢您的关注。我添加了问题的屏幕截图。请注意，如果 image:hover 未激活，图像将保留在固定标题的后面。
太棒了，完成了这项工作 - 非常感谢 Vijay。另外，很高兴知道，从现在开始我将保持我的 z-index 值为正。再次感谢，玛丽亚
您能否将答案标记为正确，以便将来任何人都可以检查导致问题的原因？谢谢:)
完成????再次感谢您的解决方案！

标签： css hover css-position z-index opacity

【解决方案1】：

感谢您的屏幕截图，它帮助我在本地重现了该问题。我通过删除header 和.proj-img 上的z-index 值解决了这个问题：

header { 
  /* remove z-index */
  /* z-index: 0; */
}
.proj-img { 
  /* remove z-index */
  /* z-index: -1; */
}

我仍然不知道删除这些 z-index 如何有助于解决问题，但一般来说使用小于 1 的值并不理想。只是为了确保标题始终位于其他所有内容之上，您可以执行以下操作：

// HTML
<header class="header" />
<div class="container">
  // rest of the content inside this div

// CSS
.header {
  position: fixed;
  z-index: 3;
}
.container {
  position: relative;
  z-index: 2;
}

由于.container parent 的索引值低于.header，因此容器内的任何元素，即使它们的z-index 高于三（3）； .header 会一直在上面。

【讨论】：