Почему z-index не выводит блок со значением больше, поверх другого объекта?

Question

[ktotitakoy]

<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

[Ankhena]

Z-index в принципе работает не так, как хотелось бы большинству (мне впрочем тоже), потому что существует такая штука как контекст наложения.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya

Чтобы псевдо был под ссылкой, ему нужно задать z-index: -1, а у самой ссылки убрать вовсе.

Answer 2

[Alfieros]

Так у вас не z-index вроде как играет роль. Ну или назначать ему 9999

Comments

[ktotitakoy]

не, не работает

[Alfieros]

ralphich, значит у вас JS мешает.

[ktotitakoy]

Alfieros, отключил js и вообще ничего не поменялось

Answer 3

[iBird Rose]

тебе наверх нужно именно сам текст вытащить. а ты вытаскиваешь всего родителя. оберни текст в span, к прмиеру и дай ему z-index: https://jsfiddle.net/xkwjm1ns/

Comments

[ktotitakoy]

у меня и стояла задача вытащить весь элемент из под другого. Решил свою задачу при помощи ответа, который я отметил как "Отмечено решением"

Answer 4

[Сергей delphinpro]

Можно вообще без него обойтись (лучше так и поступать, если это возможно, меньше потенциальных проблем в будущем).

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

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