Html 左零的嵌套粘滞元素不粘滞

为什么带有

left:0

的嵌套粘滞元素不粘滞，而带有

top:0

的嵌套元素正常粘滞

。滚动{
宽度：200px；
高度：200px；
边框：1px实心；
溢出：自动；
}
.集装箱{
宽度：600px；
高度：1000px；
}
.粘性左{
位置：粘性；
左：0；
}
.粘头{
位置：粘性；
排名：0；
}

粘头
粘左
粘顶嵌套
粘性左嵌套

根据on

位置：sticky

，顶部、右侧、底部和左侧属性确定定位元素的最终位置。我的猜测是，为了从顶部粘贴，它还需要包含

top:0

。我添加的代码片段似乎有效

。滚动{
宽度：200px；
高度：200px；
边框：1px实心；
溢出：自动；
}
.集装箱{
宽度：600px；
高度：1000px；
}
.粘性左{
位置：粘性；
左：0；
top:0；//添加此项，使其保持在顶部
}
.粘头{
位置：粘性；
排名：0；
}

粘头
粘左
粘顶嵌套
粘性左嵌套

根据on

位置：sticky

，顶部、右侧、底部和左侧属性确定定位元素的最终位置。我的猜测是，为了从顶部粘贴，它还需要包含

top:0

。我添加的代码片段似乎有效

。滚动{
宽度：200px；
高度：200px；
边框：1px实心；
溢出：自动；
}
.集装箱{
宽度：600px；
高度：1000px；
}
.粘性左{
位置：粘性；
左：0；
top:0；//添加此项，使其保持在顶部
}
.粘头{
位置：粘性；
排名：0；
}

粘头
粘左
粘顶嵌套
粘性左嵌套

让我们添加一些边框，我们将清楚地看到发生了什么：

。滚动{
宽度：200px；
高度：200px；
边框：1px实心；
溢出：自动；
}
.滚动>div{
边框：2倍纯绿；
}
.集装箱{
宽度：600px；
高度：1000px；
边框：2件纯红！重要；
}
.container>div{
边框：2倍纯绿；
}
.粘性左{
位置：粘性；
左：0；
}
.粘头{
位置：粘性；
排名：0；
}

粘头
粘左
粘顶嵌套
粘性左嵌套

让我们添加一些边框，我们将清楚地看到发生了什么：

。滚动{
宽度：200px；
高度：200px；
边框：1px实心；
溢出：自动；
}
.滚动>div{
边框：2倍纯绿；
}
.集装箱{
宽度：600px；
高度：1000px；
边框：2件纯红！重要；
}
.container>div{
边框：2倍纯绿；
}
.粘性左{
位置：粘性；
左：0；
}
.粘头{
位置：粘性；
排名：0；
}

粘头
粘左
粘顶嵌套
粘性左嵌套