如果父元素具有指定的z-index值，则伪元素的负Z-index

Question

我有一个包含z-index:1;的div。这是给定的，因为如果我删除其他元素，它将破坏它。

问题是，如果父div具有指定的z-index，则无法使用z-index将其：before元素放置在其后。

代码：

div {
  height:600px;
  width:600px;
  background:blue;
  z-index:1;
  position:relative;
}
div:before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:50px;
  left:50px;
  background:red;
  z-index:-1;
}

<div></div>

如您所见，红色区域应该在蓝色后面，但不是。

我该如何解决？