html - Is there any way to place z-index according not to its parent element

Question

I'm making a Netflix logo with pure CSS and I'm stuck. I create span element and also before the element of span 2. However, I don't know how to place .netflix span:nth-child(2) front on the z-axis when it is compared by .netflix span:nth-child(2):before. Basically, my question is is there any way to place elements on z-axis according to not by their parent elements but any elements that we want. Thanks in advance my HTML file is the following.

.netflix span {
  width: 50px;
  height: 100%;
  display: inline-block;
  position: absolute;
  background: #e50914;
  margin: 0;
  padding: 0;
  top: 0;
  transform-origin: top left;
}

.netflix span:nth-child(1) {
  left: 0;
}

.netflix span:nth-child(2) {
  transform: skewX(26deg);
  box-shadow: 0 0 20px 13px rgba(0, 0, 0, 0.6);
}

.netflix span:nth-child(2):before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  transform-origin: bottom right;
  transform: skewX(-25deg);
}

<div class="center netflix">
  <span></span>
  <span></span>
  <h1>NETFLIX</h1>
</div>

Answer 1

I would say it depends on each situation but the answer is yes if you avoid creating a stacking context with the parent element. In other words, the parent element and child element need to belong to the same stacking context to be able to place the child element below its parent.

Here is some examples to better explain:

Why can't an element with a z-index value cover its child?

css z-index issue with nested elements

How can I display a header element above my content?

I have position but z index is not working

By the way, you can create your actual shape with an easier way and avoid any complex situation involving z-index

.netflix {
  width:100px;
  height:200px;
  display: inline-block;
  background: 
    linear-gradient(#e50914,#e50914) left/20px 100%,
    linear-gradient(#e50914,#e50914) right/20px 100%;
  background-repeat:no-repeat;
  margin: 20px;
  z-index:0;
  position:relative;
  overflow:hidden;
}

.netflix:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:20px;
  transform: skewX(22deg);
  background:#e50914;
  transform-origin:top left;
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.6);
}

<div class="netflix">
  
</div>