元素的 z-index 对 :before / :after 伪元素的 z-index 的影响
Posted
技术标签:
【中文标题】元素的 z-index 对 :before / :after 伪元素的 z-index 的影响【英文标题】:Influence of the z-index of an element on the z-index of :before / :after pseudo element 【发布时间】:2013-04-06 01:04:06 【问题描述】:关于 z-index 和 css 伪元素 ::before / ::after,这是我不太了解的行为。
在这个 jsfiddle 上有说明:http://jsfiddle.net/jgoyon/T6QCf/
我创建了一个定位框并使用 ::after 伪元素添加了内容(也是定位的)。
如果我为 ::after 伪元素设置 z-index,一切正常,我可以通过使用 z-index 将其定位在父元素之上或之下 #no-z-index
background:lightblue;
width:100px;
height:100px;
position:relative;
#no-z-index:after
content: 'z-index -1';
width:50px;
height:50px;
background:yellow;
position:absolute;
z-index:-1; /* z-index in question */
top:70px;
left:70px;
如果我这样做并设置父级的 z-index,它就不再起作用了。
#z-index
background:lightblue;
left:200px;
width:100px;
height:100px;
position:relative;
z-index:0; /* parent z-index */
#z-index:after
content: 'z-index -1';
width:50px;
height:50px;
background:yellow;
position:absolute;
z-index:-1; /* z-index in question */
top:70px;
left:70px;
这是预期的行为吗?
【问题讨论】:
【参考方案1】:这是预期的行为,记录在 spec 中。
当您没有在生成元素上指定z-index
(默认为auto
)时,生成元素和伪元素将出现在同一个堆叠上下文中。如果 z-index
较低,这允许伪元素出现在元素下方。
当您在生成元素上指定z-index
时,该元素会为伪元素(实际上是它的所有后代)创建一个新的堆叠上下文,从而防止伪元素即使你给它一个否定的z-index
,它也会出现在它下面。
【讨论】:
我刚刚想起answering a duplicate question 一段时间了。以上是关于元素的 z-index 对 :before / :after 伪元素的 z-index 的影响的主要内容,如果未能解决你的问题,请参考以下文章
z-index 无法使用 Internet Explorer [重复]
你可以对 :before/:after 伪元素 (content:url(image)) 应用宽度吗?