CSS. Animation with scale ends up ruining stacking context

Question

Basically. I have a website with a fixed, z-index: 2; navbar. It works pretty well, but i also have an image which scales by 1.2 when hovered over. The problem comes up here. No matter what I do, the image ends up on top of my navbar.

   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;
}

NOTE: My .about-me-logo:hover isn't in the code because i scrapped it. I spent 1 hour on this question and asked it on multiple forums which ended up in me scrapping it. I'm hoping to still get an answer here and then put it back in my code.

EDIT: 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>

Snippet with JSFiddle (Not working great with this small of a window but it shows the issue. https://jsfiddle.net/Epicurious_/ufmw53hq/2/

Video showing what's wrong: https://kapwi.ng/c/epi7dEgH2u

Answer 1

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

Not really. You have nav > div.topnav, the nav has position: fixed; and div.topnav has position: relative; z-index: 2;

What this does is create a stacking context (div.topnav's) inside another stacking context (nav's). Now, what happens when you hover over the image ? You change the transform property which creates a new stacking context.
The problem here is that the nav's z-index isn't higher than the image's because for nav's z-index:auto, the stack level in the current stacking context is 0 (div.topnav's z-index: 2; won't matter because it's decided by the enclosing nav's stacking context) and when two elements have the same z-index in a stacking context, they will be stacked in order of appearance in HTML (see note).

The solution ? Simply move the z-index: 2; from .topnav to nav:

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

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
• https://tiffanybbrown.com/2015/09/css-stacking-contexts-wtf/index.html