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

And put in the hover styling since the question is about the hover transform. — A Haworth, Dec 26 '21 at 21:57
Using the given code (and inserting an actual image) I can't see the problem, even on the narrow viewport. Could you make your code into a working snippet which demonstrates the problem - this will include having an image we can see. — A Haworth, Dec 26 '21 at 23:31
@AHaworth Alright. I'll edit it right now and insert some footage. — Epicurious, Dec 26 '21 at 23:34
@AHaworth Added the video and a working jsfiddle snippet. I will probably not be reachable for the upcoming 12 hours. so I wont be able to respond to anything anymore. If you need me, ill see it in the morning. — Epicurious, Dec 26 '21 at 23:50

Tamashii · Accepted Answer · 2021-12-27T05:27:19.147

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 */
    }

CSS. Animation with scale ends up ruining stacking context

1 Answers1