是否可以将伪元素的堆叠顺序设置为低于其父元素？ | 是否可以将伪元素的堆叠顺序设置为低于其父元素

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

问题描述

我试图用 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?

推荐答案

被视为其相关联元素的后代。要将伪元素放置在其父元素下面，您必须创建更改默认堆叠顺序。

定位伪元素（绝对）并分配除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>

这篇关于是否可以将伪元素的堆叠顺序设置为低于其父元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！