0

基本上。我有一个固定 z-index 的网站：2；导航栏。它工作得很好，但我也有一个图像在悬停时缩放 1.2。问题就出现在这里。无论我做什么，图像都会出现在我的导航栏顶部。

   the css for it:
      .about-me-logo {

  height: 250px;
  width: 250px;
  border: solid 2px;
  border-color: #80ED99;
  border-radius: 50%;
  transition: transform .2s;
  margin-top: 25px;
  z-index: 0;
}

.about-me-logo:hover {
    transform: scale(1.2);
    z-index: 0;
    position: relative;
}

注意：我的 .about-me-logo:hover 不在代码中，因为我废弃了它。我在这个问题上花了 1 个小时，并在多个论坛上提出了这个问题，最终我放弃了它。我希望仍然在这里得到答案，然后将其放回我的代码中。

编辑：HTML

  <header>
    <div class="topnav">
      <table class="navbar-table">
        <tr>
          <td class="navbar-td">
            <h1 class="navbar-title">Bormethius</h1>
            <h4 class="navbar-description">Content Creator & Variety Gamer</h4>
          </td>
        </tr>

      </table>

        <img src="images/Bormethius_Big_Spooky.gif" alt="Bormethius_gif" href="index.html" class="topnav_gif">


      <div class="navbar">
        <center>
          <ul>
            <strong>
              <li class="navbar-content">
                <a class="navbar-link" href="index.html">Home</a>
              </li>
            </strong>
            <strong>
              <li class="navbar-content">
                <a class="navbar-link" href="index.html">Schedule</a>
              </li>
            </strong>
            <strong>
              <li class="navbar-content">
                <a class="navbar-link" href="index.html">Donations</a>
              </li>
            </strong>
            <strong>
              <li class="navbar-content">
                <a class="navbar-link" href="index.html">Contact</a>
              </li>
            </strong>
            <strong>
              <li class="navbar-content">
                <a class="navbar-link" href="index.html">Stream</a>
              </li>
            </strong>
          </ul>
        </center>
      </div>
    </div>
  </header>


  <div class="content-1">
    <p>content-1</p>
  </div>
  <div class="hr-1">

  </div>
  <div class="content-2">
    <center>
      <div class="about-me-start">
        <h1 class="about-me-start-h1">Hey there! My name is Mark, better known as <a class="about-me-start-h1-anchor" href="https://twitch.tv/bormethius">Bormethius</a></h1>
      </div>
      <div class="about-me-logo">
        <img src="images/MarkAnimePFPCrop.png" alt="Mark_Logo_Circle" class="about-me-logo-circle">
      </div>
      <div class="about-me-extra">
        <h2 class="about-me-extra-h2"><span class="about-me-extra-h2-span-intro">I'm a livestreamer based in Cleveland, OH.</span></h2>  <br> <h3 class="about-me-extra-h2">I livestream on the platform
          <a href="https://www.twitch.tv" class="about-me-extra-h2-anchor-twitch">Twitch</a>, where I livestream multiple games and do unique streams at times, for example, a cooking stream or lego stream.
          I organize many community events and have a <a href="https://www.discord.com" class="about-me-extra-h2-anchor-discord">Discord</a> server to assist with that.
          My livestreams are constantly moderated by a team of moderators who don't tolerate anything that might be seen as discriminatory.
        </h3>
      </div>
    </center>



  </div>

带有 JSFiddle 的片段（在这个小窗口中效果不佳，但它显示了问题。https: //jsfiddle.net/Epicurious_/ufmw53hq/2/

视频显示出了什么问题： https ://kapwi.ng/c/epi7dEgH2u

4

1 回答 1

0

基本上。我有一个固定 z-index 的网站：2；导航栏。

并不真地。你有 nav > div.topnav，nav 有position: fixed;，div.topnav 有position: relative; z-index: 2;

这样做是在另一个堆叠上下文 (nav's) 中创建一个堆叠上下文 (div.topnav's)。现在，当您将鼠标悬停在图像上时会发生什么？您更改创建新堆叠上下文的转换属性。
这里的问题是 nav 的 z-index 不高于图像的，因为对于 nav's z-index:auto，当前堆叠上下文中的堆栈级别为 0（div.topnavz-index: 2;无关紧要，因为它由封闭的 nav 的堆叠上下文决定）和当两个元素在堆叠上下文中具有相同的 z-index 时，它们将按照在 HTML 中出现的顺序堆叠（见注释）。

解决方案 ？只需将z-index: 2;.topnav 移动到 nav：

    nav {
      height: 100px;
      position: fixed;
      width: 100%;
      z-index: 2; /* add this */
    }
于 2021-12-27T02:46:59.730 回答