Почему при создании абсолютно позиционированного непрозрачного фона с использованием псевдокласса before он блокирует мой ввод текста, если я не установил z-index в -1?

Question

Браузер: версия Chrome 71.0.3578.98 (64-разрядная версия)

Я пытаюсь создать простой способ установки непрозрачного изображения на фоне без редактирования изображения в Photoshop, но при использованииабсолютно позиционированный :: перед псевдоклассом, внутри позиции: относительный;родительский, он блокирует входные данные в разделе, не позволяя никому их использовать;хотя фоновое изображение отображается позади родителей детей.Когда я заметил это, я попытался установить :: before для z-index: 0;и родитель по z-index: 1;и это не решило проблему.Однако, когда я устанавливаю родителя в z-index: 0;и псевдокласс к z-индексу: -1;это работает отлично.

Почему это должны быть z-index 0 и -1 вместо первого?

/* z-index: -1 commented out in .box:before */

.box {
  position: relative;
  z-index: 0;
  text-align: center;
  padding: 20px;
}

.box:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #dddddd;
  //z-index: -1;
  opacity: .5;
}

<div class="box">
  <b>Click Input</b><br /><br />
 <input type="text" class="text">
</div>

Answer 1

Это все о порядке покраски .Псевдоэлемент является позиционированным элементом, поэтому он будет окрашен после содержимого, которое не позиционировано (этап (4), затем этап (8)).Обратите внимание, что изначально для обоих z-index установлено значение auto.Теперь, если вы добавите z-index к псевдоэлементу, вы распечатаете его на шаге (3), если вы установите отрицательное значение, или шаг (9), если вы установите положительный * 1008.* значение, таким образом, вам нужно отрицательное значение z-index для рисования псевдоэлемента перед содержимым.

Что касается родительского элемента, установка его z-индекса создаст сложный констекст, заставляющий весь элемент внутри него быть нарисованным, учитываяэтот контекст стека, а не другой (шаг (8.1))

.box {
  position: relative;
  z-index: 0; /*remove this to see the difference*/
  text-align: center;
  padding: 20px;
  background:red;
}

.box:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #dddddd;
  z-index: -1;
  opacity: .5;
}

<div class="box">
  <b>Click Input</b><br>
 <input type="text" class="text">
</div>

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