css - 为什么默认情况下会在其父节点:: before下渲染一个textnode？

在撰写关于SO的其他问题的答案时，我做了以下代码段：

@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元素呈现在textnodes（橙色元素）上方，并且为了防止它发生。我必须将textnode包装在span元素中，并给它一个非负的z-index和一个非静态的position（＃bada55元素）。

经过检查，虽然::before元素的默认值（预期值）为z-index（auto），但textnode似乎一点都没有（或者至少Chrome无法显示它）。

到目前为止，我喜欢将自己视为一个z-index小忍者，通过开发this toy来部分支持该想法，以帮助朋友和同事更好地理解堆栈上下文原理和z-index。

您可能已经猜到了，我正在寻找任何解释，为什么默认情况下::before不会在元素的所有其他内容下呈现（首先是，因此在下面，对吗？），以及是否有任何证据表明这是一个（已知的）？）错误或预期的（通过设计？）行为。

我可能会错过或误解的规格会很棒。

最佳答案

默认情况下，::before绘制在文本内容下方—默认情况是everything is non-positioned。

但是您的::before是绝对定位的。定位框始终在未定位框的前面绘制。请参阅section 9.9.1（重点是我的）：

  在每个堆叠上下文中，以下各层按从前到后的顺序绘制：


  构成堆叠上下文的元素的背景和边界。
  堆栈级别为负的子堆栈上下文（首先为负）。
  流入，非内联级别，未定位的后代。
  未定位的浮点数。
  流内，行内，非定位后代，包括内联表和内联块。
  堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代。
  子堆栈上下文的堆栈级别为正（最低优先级为第一）。


将文本内容包装在定位的span中会导致按预期方式将其绘制在::before内容的前面，因为这样您就可以按源顺序放置两个定位的框。

关于css - 为什么默认情况下会在其父节点:: before下渲染一个textnode？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42171688/