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

Question

[Pro_Code]

Имеется блок:
<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;
}

По идее красный блок должен перекрывать синий?

Answer 1

[Ankhena]

Так работает.

.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
и т.д.

Comments

[Pro_Code]

Ankhena, на сколько мне известно, чтобы использовать позиционирование по оси Z, элемент должен иметь свойство position: relative или absolute. Ссылка, которую вы любезно предоставили - не раскрывает сути. В моем примере элементы не имеют свойств, которые создают побочные эффекты. Так же, решение с z-index: -1 - тоже не совсем подходит, т.к. на странице могут быть элементы с уже установленными индексами и прятать элемент - устанавливая -1 не совсем хочется...

[Ankhena]

Pro_Code,

на сколько мне известно, чтобы использовать позиционирование по оси Z, элемент должен иметь свойство position: relative или absolute.

Нет. Любое отличное от static.
И еще в гридах.

Ссылка, которую вы любезно предоставили - не раскрывает сути.

Ну что ж... Давайте читать вместе...

Новый контекст может быть сформирован в следующих случаях:
Если элемент – корневой элемент документа ( элемент)
Если элемент позиционирован не статически и его значение z-index не равно auto
Если элемент имеет прозрачность менее 1

У родителя не статик и не авто у z-index.

т.к. на странице могут быть элементы с уже установленными индексами и прятать элемент - устанавливая -1 не совсем хочется...

Могут быть.
Но при этом они могут не иметь никакого отношения вашему блоку. А могут и иметь.

Не понравились эти статьи, нагуглите любые другие про контекст наложения и z-index.

[Pro_Code]

Ankhena, не смешите меня -

Нет. Любое отличное от static.

Fixed, я конечно, упоминать не стал, а ваш - static(который между прочим по-умолчанию у элемента) - вы не забыли при первом же случае вспомнить..... Блеснули умом? Теперь давайте к делу: как мне расположить синий блок за красным, не используя z-index: -1?

[Ankhena]

Pro_Code, вы перечислили всего два из четырех возможных значения position и ничего не сказали о гридах.

Наверное, и вы и я понимаем, что вы хотели сказать.

Но этот сайт читают и совсем новички тоже. Из вашей фразы они могут сделать неверный вывод. И смешно им не будет. Тем, кто будет работать потом с их кодом, вероятно, тоже. Так что давайте постараемся аккуратнее относится к формулировкам. Тем более, что z-index и так тема сложная.

[Pro_Code]

Ankhena, по факту хотелось сделать что-то вроде такой штуки(отсюда и возник вопрос о расположении блоков):

Код прилагаю:

<div class="block">
    <div class="text">Hello World</div>
</div>

.block, .text {
	display: flex;
	justify-content: center;
	align-items: center;
}
.block {
	background: #000;
	padding: 40px 40px 60px;
}
.text {
	color: #fff;
	font-size: 50px;
	padding: 4px 25px;
	background: gold;
	border-radius: 12px;
	position: relative;
	transform-style: preserve-3d;
}
.text::before {
	content: '';
	position: absolute;
	width: calc(150% + 4px);
	height: 100%;
	left: calc(-25% - 2px);
	top: 50%;
	border: 2px solid #fff;
	border-radius: 12px;
	transform: translateZ(-1px);
}

Штука адаптивная к тексту. Проблема решена при помощи - transform-style: preserve-3d - у блока, и transform: translateZ(-1px) - у псевдоэлемента блока.

[Ankhena]

Pro_Code,
Безопасный вариант, при котором рамка не наедет на другие элементы и не уедет за край окна. Все элементы остаются в потоке, не меняют контекст наложения и вообще всё прекрасно.
В современном мире многие задачи стали решаться без абсолютов.


В вашем варианте padding 40px может не компенсировать ушки рамки. Не забудьте поправить.
Но это уже не про z-index и вообще не про то, как он работает.

[Pro_Code]

Ankhena,

В вашем варианте padding 40px может не компенсировать ушки рамки. Не забудьте поправить..

Не соображу, как на флексах можно поправить? Абсолютно позиционированный блок вылетает из контекста, вроде как...

[Ankhena]

Pro_Code,

Не соображу, как на флексах можно поправить?

Типа того: https://jsfiddle.net/z063fode/
Но если ширина окна станет меньше (минимально возможной ширины текста)х1.5, то вылезет.
А гридами просто до мин ширины контента, а это лучше.
Но зависит от задачи, конечно. Можно на мобилках перестраивать рамку просто вниз или убирать вовсе. Или ещё что-нибудь.

[Pro_Code]

Ankhena, бесспорно - вариант с гридами колоритней. Вынесите вариант с гридами в отдельное сообщение, отмечу - решением.