是否可以在其父元素下方设置伪元素的堆叠顺序? [英] Is it possible to set the stacking order of pseudo-elements below their parent element?
问题描述
我正在尝试使用 :after 伪元素 CSS 选择器设置元素样式
#element {位置:相对；z-索引:1；}#element::after {位置:相对；z-索引:0；内容: " ";位置:绝对；宽度:100px；高度:100px；}似乎 ::after 元素不能低于元素本身.
有没有办法让伪元素低于元素本身?
伪元素 被视为其关联元素的后代.要将伪元素放置在其父元素下方，您必须创建一个 新的堆叠上下文 以更改默认堆叠顺序.
定位伪元素(绝对)并分配一个非auto"的 z-index 值会创建新的堆叠上下文.
#element {位置:相对；/* 可选的 */宽度:100px；高度:100px；背景颜色:蓝色；}#element::after {内容: "";宽度:150px；高度:150px；背景颜色:红色；/* 创建一个新的堆叠上下文 */位置:绝对；z-索引:-1；/* 位于父元素下方 */}<头><meta charset="utf-8"><title>在其父元素下方放置一个伪元素</title><身体><div id="元素"></html>
I am trying to style a element with the :after pseudo element CSS selector
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
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-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屋！
