有没有办法不根据其父元素来放置z-index
有没有办法不根据其父元素来放置z-index
提问于 2018-09-10 08:39:59
我正在用纯CSS制作Netflix的徽标，但是我卡住了。我创建了span元素，也在SPAN2的元素之前。但是，当与span span:nth- .netflix ( 2 )：.netflix进行比较时，我不知道如何将span:nth-.netflix(2)放在z轴上。基本上，我的问题是，是否有任何方法可以将元素放置在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>
回答 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的复杂情况
.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52249736
复制相关文章
相似问题
腾讯云开发者
