是否可以将伪元素的堆叠顺序设置为低于其父元素？ [英] Is it possible to set the stacking order of pseudo-elements below their parent element?
问题描述
我试图用：之后的 c>伪元素CSS选择器样式元素
I am trying to style a element with the :after pseudo element CSS selector
elementTag{position:relative; z-index:1;}
elementTag:after{position:relative; z-index:0; content:" "; position:absolute; width:100px; height:100px;}
看起来像：after 元素不能低于元素本身。
It seems like the :after element can not be lower then the element itself.
有没有办法让伪元素低于元素本身？
Is there a way to have the pseudo element lower then the element itself?
推荐答案
Pseudo-元素被视为其相关联元素的后代。要将伪元素放置在其父元素下面，您必须创建新的堆叠上下文更改默认堆叠顺序。
定位伪元素（绝对）并分配除auto之外的z-index值将创建新的堆叠上下文。
Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order.
Positioning the pseudo-element (absolute) and assigning a z-index value other than "auto" creates the new stacking context.
#element {
position: relative; /* optional */
width: 100px;
height: 100px;
background-color: blue;
}
#element::after {
content: "";
width: 150px;
height: 150px;
background-color: red;
/* create a new stacking context */
position: absolute;
z-index: -1; /* to be below the parent element */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Position a pseudo-element below its parent</title>
</head>
<body>
<div id="element">
</div>
</body>
</html>
这篇关于是否可以将伪元素的堆叠顺序设置为低于其父元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
