Css 当使用before伪类创建绝对定位的不透明背景时，为什么它会阻止我的文本输入，除非我将z-index设置为-1？

浏览器：Chrome版本71.0.3578.98（64位）

我试图创建一种简单的方法，在背景上设置不透明图像，而无需在Photoshop中编辑图像，但当我使用绝对定位：：before伪类时，在position:relative内；父级，它阻止节内的输入，防止任何人使用它们；尽管背景图像显示在父母和孩子的后面。当我注意到这一点时，我尝试将：：before设置为z-index:0；z-指数的父级：1；但这并没有解决问题。但是，当我将父项设置为z索引时：0；和伪类到z-索引：-1；它工作得很好

为什么它必须是z-index 0和-1而不是前者

/*z-index:-1在框中注释掉：之前*/
.盒子{
位置：相对位置；
z指数：0；
文本对齐：居中；
填充：20px；
}
.盒子：以前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景：#dddddd；
//z指数：-1；
不透明度：.5；
}

单击输入

一切都是关于。伪元素是一个定位元素，因此它将在未定位的内容之后绘制（步骤（4）然后是步骤（8））。请注意，最初两者都将

z-index

设置为自动。现在，如果将

z-index

添加到伪元素中，如果设置了负值，则在步骤（3）中打印它；如果设置了正值，则在步骤（9）中打印它，因此需要使用负值

z-index

在内容之前绘制伪元素

关于父元素，设置其z索引将创建一个堆栈constext，使其内部的所有元素都在考虑该堆栈上下文而不是另一个堆栈上下文的情况下进行绘制（步骤（8.1））

.box{
位置：相对位置；
z索引：0；/*删除此项以查看差异*/
文本对齐：居中；
填充：20px；
背景：红色；
}
.盒子：以前{
内容：“；
显示：块；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
背景：#dddddd；
z指数：-1；
不透明度：.5；
}

单击输入

我敢肯定这篇文章回答了你的问题，是重复的。