有没有办法根据其父元素放置z-index

Question

我正在制作带有Netflix徽标的pure徽标，但遇到问题了CSS。我创建了span元素，也创建了span 2的元素。但是，当与.netflix
span：nth-​​进行比较时，我不知道如何将.netflix span：nth-​​child（2）放在z轴上。
child（2）：之前。基本上，我的问题是，有什么方法可以将元素放置在z轴上，而不是根据它们的父元素而不是我们想要的任何元素。在此先感谢我的HTML文件如下。

.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

我会说这取决于每种情况，但是如果您避免使用父元素创建堆栈上下文，答案是肯定的。换句话说，父元素和子元素需要属于同一堆叠上下文，以便能够将子元素放置在其父元素下方。

顺便说一句，您可以使用更简单的方法来创建实际形状，并避免涉及任何复杂情况 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>