Z-index and background overlay

I have a button with a background color, and when I hover over it, it fills the overlay pseudo-element with a different background color and z-index, and with a z-index some kind of misunderstanding:

By default, everyone’s z-index is auto, but as I read in another answer, “Default z-index of any element is 'auto' with exception of html tag which has default z-index: 0. 'Auto' means that element gets z-index from its parent. ", i.e. 0.

This means that when you hover over a relative button, the pseudo-element absolutely positioned in it overlaps it with itself, since it goes lower in the code. If I set the pseudo-element z-index -1, it goes beyond the parent button and is not visible, because the button z-index is not set, but by default it is auto i.e. 0, which is greater than -1.

But then I explicitly set the button z-index: 0 and suddenly the overlay starts filling in the background of the button on hover, but the signature on the button itself is visible.

Actually, I don’t understand:

1. If z-index is 0 by default, why does something change if you set it to 0 explicitly?

2. How does the overlay push its background color to the button, but doesn’t touch the signature, if its z-index is -1 and the button has 0 (although 1/2 / etc does have the same effect)? How does an element with a smaller z-index selectively affect the element in front of it, replacing the background-color but not touching the signature?

Link to code:

https://jsfiddle.net/Solow/pv9x8zeq/39/

.btn {
  position: relative;
  z-index: 0;

  border: 0;
  padding: 15px 20px;
  background-color: lightgrey;
  cursor: pointer;
  color: white;

  &::before {
    content: "";
    position: absolute;
    z-index: -1;

    top: 0;
    left: 0;
    width: 0;
    height: 100%;

    background-color: dimgrey;
    transition: .5s;
  }

  &:hover::before {
    width: 100%;
  }
}