是否可以将伪元素的堆叠顺序设置在其父元素之下？
是否可以将伪元素的堆叠顺序设置在其父元素之下？
:after
#element {
position: relative;
z-index: 1;}#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;}::after
凤凰求蛊浏览 998回答 3
3回答
-
饮歌长啸
伪元素被视为其关联元素的后代。若要将伪元素置于其父元素的下面，必须创建新的堆叠上下文若要更改默认堆叠顺序，请执行以下操作。定位伪元素(绝对值)并分配一个z-索引值而不是“自动”创建新的堆叠上下文。#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> -
守着星空守着你
我知道这是个老生常谈，但我觉得有必要贴出正确的答案。这个问题的实际答案是，您需要用伪元素在元素的父元素上创建一个新的堆叠上下文(实际上您必须给它一个z索引，而不仅仅是一个位置)。就像这样：#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"> </div></div> -
素胚勾勒不出你
试试看el { transform-style: preserve-3d;}el:after { transform: translateZ(-1px);}
随时随地看视频慕课网APP
Html/CSS