@ralphich

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

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

61ebc36b6ed4c178077439.png
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Z-index в принципе работает не так, как хотелось бы большинству (мне впрочем тоже), потому что существует такая штука как контекст наложения.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya

Чтобы псевдо был под ссылкой, ему нужно задать z-index: -1, а у самой ссылки убрать вовсе.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
mrsexy
@mrsexy
Senior Pomidor
Так у вас не z-index вроде как играет роль. Ну или назначать ему 9999
Ответ написан
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
тебе наверх нужно именно сам текст вытащить. а ты вытаскиваешь всего родителя. оберни текст в span, к прмиеру и дай ему z-index: https://jsfiddle.net/xkwjm1ns/
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Можно вообще без него обойтись (лучше так и поступать, если это возможно, меньше потенциальных проблем в будущем).

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


a { position: relative; }
a span { position: relative; }
a::before { position: absolute; }
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы