为何body标签是否创建堆叠上下文取决于html标签的背景色？

每个HTML页面的根元素<html>标签都会形成一个堆叠上下文。

示例1：html设置背景色时的情况 #

此时<html>标签是唯一的堆叠上下文：

html {
background-color: gray;
}
body {
background: #222;
color: white;
box-sizing: border-box;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.box:before {
content: "";
background-color: tomato;
position: absolute;
z-index: -1;
inset: 0;
margin: -5px;
}

<h1>Header</h1>
<div class="box"></div>

这个示例中，番茄色的伪元素因z-index小于0，会绘制在body背景色（#222）之后。

示例2：移除html背景色后的情况 #

body {
background: #222;
color: white;
box-sizing: border-box;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.box:before {
content: "";
background-color: tomato;
position: absolute;
z-index: -1;
inset: 0;
margin: -5px;
}

<h1>Header</h1>
<div class="box"></div>

此时番茄色伪元素会绘制在body背景色之上，看似是<body>标签创建了堆叠上下文，但实际是浏览器的特殊兼容逻辑导致的视觉表现。

CSS规范中的相关说明 #

这一行为在CSS Backgrounds and Borders Module Level 3规范中有明确规定，核心是为了兼容早期HTML的bgcolor和background属性：

• 当<html>元素的背景为透明或未设置时，浏览器会将<body>元素的背景“提升”为整个视口的画布背景，而非作为<body>元素自身的背景。
• 这种情况下，<body>元素的背景不再属于其自身的堆叠层级，<body>的内容则处于<html>的堆叠上下文中。伪元素的z-index: -1是相对于<html>的堆叠上下文，因此会显示在画布背景（原body背景）之上，造成了“body创建堆叠上下文”的视觉错觉。

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