是否可以在其父元素下方设置伪元素的堆叠顺序?

编程入门行业动态更新时间:2024-10-25 06:25:36

本文介绍了是否可以在其父元素下方设置伪元素的堆叠顺序?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我正在尝试使用 :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>