z-index for pseudo :after not placed under parent element
z-index for pseudo :after not placed under parent element
我试图将一个元素夹在“:before”和“:after”伪元素之间,但是尽管在“:after”上将 z-index 设置为 -1,它仍然出现在父元素之上。
在下面的示例中,红色应该在顶部,绿色在中间,蓝色在底部。
看到这个fiddle:https://jsfiddle.net/zL1yz86f/2/
HTML:
<div></div>
CSS:
div {
background: green;
position: relative;
z-index: 10;
width: 30%;
height: 200px;
float: left;
margin-right: 3%}
div:before {
content: "";
height: 0;
width: 0;
border-top: 200px solid red;
border-right: 200px solid transparent;
position: absolute;
top: -20px;
left: -10px;
z-index: 20;
}
div:after {
content: "";
height: 200px;
width: 200px;
background: blue;
position: absolute;
top: -20px;
left: -10px;
z-index: -1;
}
删除父
的z-index
这将使伪元素拥有自己的堆叠上下文(因为您已经应用了 position: absolute
)。这是更新后的 fiddle。希望这对您有所帮助!
我试图将一个元素夹在“:before”和“:after”伪元素之间,但是尽管在“:after”上将 z-index 设置为 -1,它仍然出现在父元素之上。
在下面的示例中,红色应该在顶部,绿色在中间,蓝色在底部。
看到这个fiddle:https://jsfiddle.net/zL1yz86f/2/
HTML:
<div></div>
CSS:
div {
background: green;
position: relative;
z-index: 10;
width: 30%;
height: 200px;
float: left;
margin-right: 3%}
div:before {
content: "";
height: 0;
width: 0;
border-top: 200px solid red;
border-right: 200px solid transparent;
position: absolute;
top: -20px;
left: -10px;
z-index: 20;
}
div:after {
content: "";
height: 200px;
width: 200px;
background: blue;
position: absolute;
top: -20px;
left: -10px;
z-index: -1;
}
删除父
的z-index
这将使伪元素拥有自己的堆叠上下文(因为您已经应用了 position: absolute
)。这是更新后的 fiddle。希望这对您有所帮助!