首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有没有办法不根据其父元素来放置z-index

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

Stack Overflow用户
提问于 2018-09-10 08:39:59
回答 1查看 429关注 0票数 1

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

代码语言:javascript
复制
.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);
}
代码语言:javascript
复制
<div class="center netflix">
  <span></span>
  <span></span>
  <h1>NETFLIX</h1>
</div>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-10 16:33:50

我想说这取决于每种情况,但如果您避免使用父元素创建堆叠上下文,那么答案是肯定的。换句话说,父元素和子元素需要属于相同的堆栈上下文,才能将子元素放在其父元素的下方。

这里有一些例子可以更好地解释:

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

顺便说一句,你可以用一种更简单的方法创建你的实际形状,并避免任何涉及z-index的复杂情况

代码语言:javascript
复制
.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);
}
代码语言:javascript
复制
<div class="netflix">
  
</div>

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52249736

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档