[英]unable to make an absutely positioned pseudo element appear in front of its parent
I am trying to add a pseudo element beneath its parent. 我正在尝试在其父项下添加一个伪元素。 Both are absolutely positioned, but the pseudo element persists in stacking above its parent. 两者都是绝对定位的,但是伪元素仍然在其父级之上堆叠。
Here is a jsfiddle. 这是一个jsfiddle。
<div></div>
div{
position: absolute;
top: 10px;
left: 10px;
height: 20px;
width: 20px;
background: red;
z-index: 10;
}
div:before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: blue;
z-index: 1;
}
You just need to add another parent with a z-index of 1 and relative positioning. 您只需要添加z索引为1且相对定位的另一个父对象。
Example: http://jsfiddle.net/D6mwn/1/ 示例: http : //jsfiddle.net/D6mwn/1/
Read more: Is it possible to set the stacking order of pseudo-elements below their parent element? 阅读更多: 是否可以将伪元素的堆叠顺序设置在其父元素之下?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.