Why doesn't z-index draw a block with a value greater than another object?

Question

css

<ul class="choise-menu__list">
                                <li>
                                    <a href="#" class="choise-menu__link">TEXT</a>
                                </li>
                                <li>
                                    <a href="#" class="choise-menu__link">TEXT</a>
                                </li>
                                <li>
                                    <a href="#" class="choise-menu__link">TEXT</a>
                                </li>
                                <li>
                                    <a href="#" class="choise-menu__link">TEXT</a>
                                </li>
                                <li>
                                    <a href="#" class="choise-menu__link">TEXT</a>
                                </li>
                                <li>
                                    <a href="#" class="choise-menu__link">TEXT</a>
                                </li>
    </ul>

.choise-menu {

  &__list {
    display: grid;
    grid-auto-flow: column;
    column-gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(160px, auto));
  }

  &__link {
    display: grid;
    justify-items: center;
    font-size: 18px;
    padding: 20px 0;
    position: relative;
    z-index: 10;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid #D6D6D6;
    &:before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      background-color: green;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid #D6D6D6;
      transform: translate(6px, 6px);
    }
  }
}

Answer 1

Z-index doesn't actually work the way most people would like (me too), because there is such a thing as a stacking context.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya
In order for the pseudo to be under the link, it needs to be set z-index: -1, and removed from the link itself altogether.

Answer 2

So your z-index doesn't seem to play a role. Well, or assign him 9999

Answer 3

you need to pull the text itself up. and you pull out the entire parent. wrap the text in a span to primer and give it a z-index: https://jsfiddle.net/xkwjm1ns/

Answer 4

You can do without it at all (better to do so if possible, less potential problems in the future).

<a href="#" class="choise-menu__link">
  <span>TEXT</span>
</a>

a { position: relative; }
a span { position: relative; }
a::before { position: absolute; }