为什么使用body::before设置背景图时需要添加z-index:-1才生效？

问题原因解析 #

1. 对::before的作用认知有误
   ::before中的「before」指的是插入到宿主元素所有原生子内容的前面，而非天生层级更低。它本质是body的第一个子节点，没有定位属性干扰时，普通流后渲染的元素会覆盖先渲染的元素，此时::before确实会在form下方。
2. 定位元素的层叠优先级远高于普通流元素
   你给body::before设置了position: fixed，只要元素设置了非static的定位值，默认层级就会高于所有普通非定位元素。同层叠上下文内从下到上的标准层叠顺序为：

• 宿主元素的背景、边框
• z-index为负值的子元素
• 普通非定位块级元素
• 非定位浮动元素
• 非定位行内元素
• z-index为0/auto的定位元素
• z-index为正值的子元素
  你的form属于普通非定位块级元素，默认z-index: auto的固定定位::before层级远高于它，自然会盖住表单内容。

3. 设置z-index: -1后，::before的层级降到普通块级元素之下，就会作为背景正常展示。

补充说明：只要你没有给body设置非static的定位属性和z-index值，z-index: -1的::before只会在body的子内容下方，不会跑到body本身的背景之下，不会出现显示异常。

内容的提问来源于stack exchange，提问作者hsivru