为什么在“html”上设置“overflow-x:hidden”会导致子项'；s`position:sticky`元素的行为是否不同？

以下两个示例相同，但第一个示例仅将

溢出-x:hidden

应用于

正文

，而第二个示例将其应用于

html和正文

为什么第一个例子能像预期的那样工作，而第二个却不能

这与预期的效果一样：

正文{
保证金：0；
溢出x：隐藏；
}
p、 粘的{
位置：粘性；
排名：0；
颜色：红色；
}

Lorem ipsum Door坐在阿梅特·康塞特图（amet Concertetur），一位精英。你有什么大问题？德鲁洛姆·沃卢帕提布·沃卢帕提斯·威格尼斯莫·丘比特·沃卢帕提斯·杜西姆斯·乌拉姆，卡姆克·维塔。多洛里布，你的意思是什么

foo
Lorem ipsum dolor坐在amet Concertetur，告别精英。你有什么大问题？德鲁洛姆·沃卢帕提布·沃卢帕提斯·威格尼斯莫·丘比特·沃卢帕提斯·杜西姆斯·乌拉姆，卡姆克·维塔。多洛里布，你的意思是什么

Lorem ipsum dolor坐在amet Concertetur，告别精英。你有什么大问题？德鲁洛姆·沃卢帕提布·沃卢帕提斯·威格尼斯莫·丘比特·沃卢帕提斯·杜西姆斯·乌拉姆，卡姆克·维塔。多洛里布，你的意思是什么

Lorem ipsum dolor坐在amet Concertetur，告别精英。你有什么大问题？德鲁洛姆·沃卢帕提布·沃卢帕提斯·威格尼斯莫·丘比特·沃卢帕提斯·杜西姆斯·乌拉姆，卡姆克·维塔。多洛里布，你的意思是什么

Lorem ipsum dolor坐在amet Concertetur，告别精英。你有什么大问题？德鲁洛姆·沃卢帕提布·沃卢帕提斯·威格尼斯莫·丘比特·沃卢帕提斯·杜西姆斯·乌拉姆，卡姆克·维塔。多洛里布，你的意思是什么

Lorem ipsum dolor坐在amet Concertetur，告别精英。你有什么大问题？德鲁洛姆·沃卢帕提布·沃卢帕提斯·威格尼斯莫·丘比特·沃卢帕提斯·杜西姆斯·乌拉姆，卡姆克·维塔。多洛里布，你的意思是什么

Lorem ipsum dolor坐在amet Concertetur，告别精英。你有什么大问题？德鲁洛姆·沃卢帕提布·沃卢帕提斯·威格尼斯莫·丘比特·沃卢帕提斯·杜西姆斯·乌拉姆，卡姆克·维塔。多洛里布，你的意思是什么

Lorem ipsum dolor坐在amet Concertetur，告别精英。你有什么大问题？德鲁洛姆·沃卢帕提布·沃卢帕提斯·威格尼斯莫·丘比特·沃卢帕提斯·杜西姆斯·乌拉姆，卡姆克·维塔。多洛里布，你的意思是什么
 

以下是CSS定位规范必须说明的内容

6.2。粘性定位

粘性定位框的定位方式与相对定位框的定位方式类似，但偏移量是使用滚动框参照最近的祖先计算的，如果没有祖先具有滚动框，则参照视口计算

所以这里的问题是：有滚动框的最近祖先是什么，与垂直滚动条滚动的框相反

要理解这一点，我们需要考虑溢出传播。报告说：

3.4。溢出视口传播

UAs必须将根元素上设置的overflow-*值应用于视口。但是，当根元素是溢出值可见（在两个轴上）的[HTML]HTML元素（包括HTML的XML语法）并且该元素具有作为子元素的body元素时，用户代理必须将第一个子元素的溢出-*值应用于视口。从中传播值的元素必须具有visible的used overflow值

因此，在第一种情况下

body {
  margin: 0;
  overflow-x: hidden;
}

主体元素的溢出特性将传播到视口。由于这种传播，没有具有滚动框的

p.sticky

的祖先元素，因此可以相对于视口计算粘性偏移量。视口也是通过垂直滚动条滚动的框

在第二种情况下

html, body {
  margin: 0;
  overflow-x: hidden;
}

传播到视口的是html元素的溢出属性，body元素保留其指定的溢出属性，从而建立一个滚动框，它是

p.sticky

的祖先。然后相对于主体元素计算偏移。但垂直滚动条工作的不是主体元素，而是视口

因此，

p.sticky

不会相对于身体元素移动，而且随着整个身体元素的移动，

p.sticky

也没有什么东西可以被卡住。

这里有一些见解：？