@Pro_Code

Почему не работает z-index?

Имеется блок:
<div class="block"></div>
Стили для него:
.block {
	width: 120px;
	height: 40px;
	background: red;
	position: relative;
	z-index: 2;
}
.block:before {
	content: '';
	background: blue;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	z-index: 1;
}

617ac395cb814221764416.png
По идее красный блок должен перекрывать синий?
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Так работает.
.block {
  width: 120px;
  height: 40px;
  background: red;
  position: relative;
}
.block:before {
  content: '';
  background: blue;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  z-index: -1;
}


А у вас "не работает", потому что z-index работает совсем не так, как вам хочется.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya
и т.д.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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