Question

我正在制作带有纯CSS的Netflix标志，但被卡住了。我创建了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

我会说这取决于每种情况，但是如果您避免使用父元素创建堆栈上下文，答案是肯定的。换句话说，parent元素和child元素必须属于同一堆叠上下文，以便能够将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

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

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

1 个答案: