关于父元素和before伪类以及after的层级z-index问题

父元素和before伪类一起书写的时候，默认before伪类会在页面的上层，第一种方式是伪类设置 z-index:-1

.parent{

}
.parent::before{
    z-index: -1 
}

但会出现一个问题，由于伪类设置了 z-index -1，当页面中别的元素，例如背景，就会覆盖伪类，导致伪类无法被看到，那么，这种时候还有另外一种解决办法

#parent{
    transform-style: preserve-3d;
}
#parent::before{
    transform: translateZ(-1px) // Z轴方向位移-1px
}