为什么默认情况下文本节点呈现在其父级 ::before 下方? [英] Why is a textnode rendered below its parents` ::before by default?
问题描述
在写一个关于 SO 的不同问题的答案时,我做了这个片段:
On writing-up an answer for a different question on SO, I made this snippet:
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light');
/* relevant CSS */
div {
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0; left:0;
}
div>span {
position:relative;
z-index:0;
}
/* rest is just styling - should be irrelevant for the question */
div {
font: normal normal normal 2rem/1 'Shadows Into Light', cursive;
color: white;
text-align:center;
margin: 1rem;
padding: 1rem;
min-width: 15rem;
cursor: pointer;
}
div::before {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity .3s cubic-bezier(.4,0,.2,1);
background-color: #bada55;
border-radius: .4rem;
}
div[orange]:before {
background-color: #f50;
}
div:hover::before {
opacity:.65;
}
body {
margin: 0; padding: 0;
}
center-me-please {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: transparent url(http://lorempixel.com/g/1200/800/fashion) no-repeat 50% 50% /cover;
}
<center-me-please>
<div><span>#bada55</span></div>
<div orange>not so #bada55</div>
我很惊讶地注意到 ::before
元素呈现在文本节点(橙色元素)之上,并且为了防止它发生.我不得不将 textnode 包裹在一个 span
元素中,并给它一个非负的 z-index
和一个非静态的 position
(#bada55元素).
I was surprised to notice the ::before
element is rendered above textnodes (orange element) and, in order to prevent it from happening. I had to wrap the textnode in a span
element and give it a non-negative z-index
and a non-static position
(#bada55 element).
在检查中,虽然 ::before
元素具有 z-index
(auto
) 的默认(预期)值,但文本节点似乎根本没有(或者至少 Chrome 无法显示它).
On inspection, while the ::before
element has a default (expected) value of z-index
(auto
), the textnode doesn't seem to have one at all (or at least Chrome's not able to show it).
到目前为止,我喜欢把自己想象成一个 z-index
小忍者,这个想法部分得到了开发 这个玩具
帮助朋友和同事更好地理解stacking contexts的原理和z-index
.
Up to now I liked to think of myself as a z-index
little ninja, idea partly backed-up by developing this toy
to help friends and colleagues better understand stacking contexts principle and z-index
in general.
正如您可能已经猜到的那样,我正在寻找有关为什么 ::before
默认情况下不呈现在元素中的其他所有内容下方的任何解释(它是第一个,因此在下方,对吗?)和任何关于这是(已知?)错误或有意(设计?)行为的证据.
As you might have guessed, I'm looking for any explanation on why ::before
is not rendered below everything else in an element by default (it's first, therefore below, right?) and for any evidence about this being either a (known?) bug or intended (by design?) behavior.
我可能错过或误解的规范会很棒.
A spec I might have missed or misinterpreted would be great.
推荐答案
::before
is 默认情况下绘制在文本内容下方——默认情况是当
::before
is painted below text content by default — and the default case is when everything is non-positioned.
但是你的 ::before
是绝对定位的.定位框总是绘制在非定位框的前面.请参阅第 9.9.1 节(重点是我的):
But your ::before
is absolutely positioned. Positioned boxes are always painted in front of non-positioned boxes. Refer to section 9.9.1 (emphases mine):
在每个堆叠上下文中,以下图层按从后到前的顺序绘制:
Within each stacking context, the following layers are painted in back-to-front order:
- 构成堆叠上下文的元素的背景和边框.
- 具有负堆栈级别(最负优先)的子堆栈上下文.
- 流入的、非内联级别的、非定位的后代.
- 未定位的浮动.
- 内联、内联级、非定位后代,包括内联表和内联块.
- 堆栈级别为 0 的子堆栈上下文和堆栈级别为 0 的定位后代.
- 具有正堆栈级别的子堆栈上下文(最不积极的优先).
将文本内容包装在定位的 span
中会导致它按预期绘制在 ::before
内容的前面,从那时起您有两个按源顺序定位的框.
Wrapping your text content in a positioned span
causes it to be painted in front of the ::before
content as expected since then you have two positioned boxes in source order.
这篇关于为什么默认情况下文本节点呈现在其父级 ::before 下方?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!