有没有办法根据其父元素放置z-index [英] Is there any way to place z-index according not to its parent element

问题描述

我正在用纯CSS制作Netflix标志，但被卡住了.我创建了span元素，也创建了span 2的元素.但是，当与.netflix span:nth-​​进行比较时，我不知道如何将.netflix span:nth-​​child(2)放在z轴的前面. child(2):之前.基本上，我的问题是，有什么方法可以将元素放置在z轴上，而不是根据它们的父元素，而不是我们想要的任何元素.在此先感谢我的HTML文件如下.

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>

推荐答案

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

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:

为什么具有z-index值的元素不能覆盖其子级?

带有嵌套元素的CSS Z索引问题

如何显示我内容上方的标题元素?

我有位置，但是z索引不起作用

顺便说一句，您可以用一种更简单的方法来创建实际形状，并避免涉及z-index

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>

这篇关于有没有办法根据其父元素放置z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！