html - 出现在菜单前面的图像

Question

我正在制作一个网站，我有一个小错误，其中一个部分中的图像出现在我的菜单前面。我试图绕过 z-index 值，但对我没有任何作用。 Here is what it looks like

我希望图像按原样显示在菜单下，但它似乎无法正常工作，而且我无法检测到问题，有人可以帮我解决这个问题吗？

HTML:

<section id="portfolio">
 <div class="container">
<h1>MY WORK</h1>
<h2>Below you will find my favorite projects & school assignments</h2>
<!--CPU-->
<div class="project">
  <div class="img-box">
    <img src="./img/cpu.png">
    <div class="hovertext">Test Text 1</div>
  </div>
</div>
<!--JAVA-->
<div class="project">
  <div class="img-box">
    <img src="./img/JSON.png">
    <div class="hovertext">Test Text 2</div>
  </div>
</div>
<!--PHOTOSHOP-->
<div class="project">
  <div class="img-box">
    <img src="./img/photoshop.png">
    <div class="hovertext">Test Text 3</div>
  </div>
</div>

CSS:

#portfolio {
   background-color: : white;
   padding-bottom: 100px;
}

#portfolio h1 {
  font-size: 30px;
  font-weight: 400px;
  letter-spacing: 5px;
  text-align: center;
  color: #000;
}

#portfolio h2 {
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  color: #000;
}

.project {
  display: inline-block;
  width: 33.33%;
  margin-right: -4px;
}

.img-box {
  padding: 20px;
  position: relative;
}

.project img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.img-box img:hover {
  transform: scale(1.1);
  transition: 0.5s;
  opacity: 0.5;
}

.img-box .hovertext {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.img-box:hover .hovertext {
  display: block;
}

Answer 1

我没有测试，但也许会工作。

<div class="container" style="z-index: -999999">