ada*_*ign 270 css z-index pseudo-element
我试图用:after伪元素CSS选择器设置元素的样式
#element {
position: relative;
z-index: 1;
}
#element::after {
position:relative;
z-index: 0;
content: " ";
position: absolute;
width: 100px;
height: 100px;
}
看起来::after元素不能低于元素本身.
有没有办法让伪元素低于元素本身？
Arl*_*ley 333
伪元素被视为其相关元素的后代.要将伪元素定位在其父元素下方,您必须创建新的堆叠上下文以更改默认堆叠顺序.
定位伪元素(绝对)并指定除"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>Ada*_*dam 240
我知道这是一个老线程,但我觉得有必要发布正确的答案.这个问题的实际答案是你需要在元素的父元素上使用伪元素创建一个新的堆叠上下文(实际上你必须给它一个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;
}
它与使用:before或:after伪元素无关.
#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>Eug*_*run 52
试试看
el {
transform-style: preserve-3d;
}
el:after {
transform: translateZ(-1px);
}
Gab*_*ley 15
这里有两个问题:
CSS 2.1规范声明"在:之前和之后:伪元素元素与其他框架交互,例如运行框,就好像它们是在关联元素内插入的真实元素一样." 鉴于在大多数浏览器中实现z索引的方式,在所有浏览器中运行的DOM中移动内容低于其父元素的z-index非常困难(阅读,我不知道如何).
上面的数字1并不一定意味着它是不可能的,但它的第二个障碍实际上更糟:最终它是浏览器支持的问题.在FF3.6之前,Firefox根本不支持生成内容的定位.谁知道像IE这样的浏览器.所以,即使你能找到一个让它在一个浏览器中运行的黑客,它很可能只能在那个浏览器中运行.
我能想到的唯一可以跨浏览器工作的是使用javascript来插入元素而不是CSS.我知道这不是一个很好的解决方案,但是:之前和之后:伪选择器真的看起来不像它们会在这里削减它.
cwe*_*der 11
关于规范(http://www.w3.org/TR/CSS2/zindex.html),由于a.someSelector被定位,它创建了一个新的堆叠上下文,其子项无法突破.保持a.someSelector未定位,然后将子a.someSelector:after放在与a.someSelector相同的上下文中.
我知道这个问题很古老,并且有一个公认的答案,但我找到了一个更好的解决方案.我在这里发布它所以我不会创建一个重复的问题,并且该解决方案仍然可供其他人使用.
切换元素的顺序.将:before伪元素用于下面应该包含的内容,并调整边距以进行补偿.保证金清理可能会很混乱,但z-index会保留所需的保证金.
我用IE8和FF3.6成功测试了这个.
小智 6
设置z-index了的:before或者:after伪元素为-1，并给它一个position是荣誉z-index性质（absolute，relative，或fixed）。这是有效的，因为伪元素的z-index相对于其父元素，而不是<html>，这是其他元素的默认值。这是有道理的，因为它们是<html>.
我遇到的问题（导致我提出这个问题和上面接受的答案）是我试图使用:after伪元素来获得背景为z-index15的元素，即使设置z-index为 14，它仍然在其父级之上呈现。这是因为，在该堆叠上下文中，它的父级的 az-index为 0。
希望这有助于澄清一些正在发生的事情。
| 归档时间： |
|
| 查看次数： |
208196 次 |
| 最近记录： |