Z索引一个伪元素在它的父代 [英] Z Index a pseudoelement behind it's parent

问题描述

这是我的笔：

http://codepen.io/Tiger0915/pen/OPXway p>

和我的SCSS：

  div {
 width：400px ; 
 height：250px; 
 position：relative; 
 background：gray; 
 margin：100px auto; 
 z-index：5; 
 
&：after {
 content：：after; 
 position：absolute; 
 width：100％; 
 height：100％; 
 top：-20px; 
 right：-70px; 
 background：lightgrey; 
 z-index：4; 
} 
 
} 
  

如何取得我的

解决方案

我想我想出来了。像ajp15243说，我不能在父元素后面放置一个子元素。

所以我最终创建了2个不同的伪元素，：before 和 div （）之后的：使用负z索引），并且我可以将之后的放置在比之前更低的z索引以获得效果

  div {
 width：400px; 
 height：250px; 
 position：relative; 
 margin：100px auto; 
 z-index：5; 
 
&：before {
 content：; 
 position：absolute; 
 width：100％; 
 height：100％; 
 top：0; 
 right：0; 
 background：gray; 
 z-index：-1; 
} 
 
&：after {
 content：：after; 
 position：absolute; 
 width：100％; 
 height：100％; 
 top：-20px; 
 right：-70px; 
 background：lightgrey; 
 z-index：-2; 
} 
 
} 
  

这是笔：

http://codepen.io/Tiger0915/pen/XJKBoq

I'm trying to z index an element behind it's parent but it isn't working.

Here's my pen:

http://codepen.io/Tiger0915/pen/OPXway

and my SCSS:

div {
  width: 400px;
  height: 250px;
  position: relative;
  background: grey;
  margin: 100px auto;
  z-index: 5;

  &:after {
    content: ":after";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    right: -70px;
    background: lightgrey;
    z-index: 4;
  }

}

how do I get my :after to appear behind my parent div?

解决方案

I think I figured it out. Like ajp15243 said, I can't position a child element behind a parent element.

So I ended up creating 2 different pseudoelements, a :before and an :after, both of which appear behind the other children of my div (using negative z indexes), and I can put the after at a lower z index than the before to get the effect I wanted.

div {
  width: 400px;
  height: 250px;
  position: relative;
  margin: 100px auto;
  z-index: 5;

  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: grey;
    z-index: -1;
  }

  &:after {
    content: ":after";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20px;
    right: -70px;
    background: lightgrey;
    z-index: -2;
  }

}

Here's the pen:

http://codepen.io/Tiger0915/pen/XJKBoq

这篇关于Z索引一个伪元素在它的父代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！