我正在尝试使用 :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>
更多推荐
是否可以在其父元素下方设置伪元素的堆叠顺序?
发布评论