问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我正在尝试使用 :after 伪元素 CSS 选择器来设置元素的样式

#element {
    position: relative;
    z-index: 1;
}

#element::after {
    position:relative;
    z-index: 0;
    content: " ";
    position: absolute;
    width: 100px;
    height: 100px;
}

似乎 ::after 元素不能低于元素本身。

有没有办法让伪元素低于元素本身？

原文由 adardesign 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssz-indexpseudo-element
阅读 814
2 个回答
得票最新
社区维基
1
✓ 已被采纳

伪元素 被视为其关联元素的后代。要将伪元素定位在其父元素下方，您必须创建一个 新的堆叠上下文 来更改默认堆叠顺序。

定位伪元素（绝对）并分配除“auto”以外的 z-index 值会创建新的堆叠上下文。

 #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>

原文由 Arley 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

我知道这是一个旧线程，但我觉得有必要发布正确的答案。这个问题的实际答案是您需要在具有伪元素的元素的父级上创建一个新的堆叠上下文（实际上您必须给它一个 z-index，而不仅仅是一个位置）。

像这样：

 #parent {
    position: relative;
    z-index: 1;
}
#pseudo-parent {
    position: absolute;
    /* no z-index allowed */
}
#pseudo-parent:after {
    position: absolute;
    top:0;
    z-index: -1;
}


 #parent { position: relative; z-index: 1; }
#pseudo-parent { position: absolute; } /* no z-index required */
#pseudo-parent:after { position: absolute; z-index: -1; }

/* Example styling to illustrate */
#pseudo-parent { background: #d1d1d1; }
#pseudo-parent:after { margin-left: -3px; content: "M" }

 <div id="parent">
 <div id="pseudo-parent">
   &nbsp;
 </div>
</div>

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题