CSS。具有比例的动画最终会破坏堆叠上下文

Question

基本上。我有一个固定的网站，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 的代码片段（不适用于这么小的 window 但它显示了问题。https://jsfiddle.net/Epicurious_/ufmw53hq/2/

显示问题的视频： https://kapwi.ng/c/epi7dEgH2u

Answer 1

Basically. I have a website with a fixed, z-index: 2; navbar.

不是真的。您有导航 > div.topnav，导航有 position: fixed; 和 div.topnav 有 position: relative; z-index: 2;

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

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

    nav {
      height: 100px;
      position: fixed;
      width: 100%;
      z-index: 2; /* add this */
    }

CSS。具有比例的动画最终会破坏堆叠上下文

CSS. Animation with scale ends up ruining stacking context

html

css

stacking-context