CSS position: sticky 布局不符合预期的问题求助

我已查阅大量关于CSS position: sticky的资料，但它的表现不符合我的预期，恳请帮忙解析。

我的代码 #

CSS代码 #

#upper {
  width: 200px;
  height: 200px;
  background-color: blue;
}

#middle {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: sticky;
  left: 100px;
  top: 100px;
}

#lower {
  width: 200px;
  height: 200px;
  background-color: red;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>sticky position</title>
  <link rel="stylesheet" href="sticky.css">
</head>

<body>
  <div id="upper"></div>
  <div id="middle"></div>
  <div id="lower"></div>
</body>

</html>

预期效果 #

• 左上角显示蓝色盒子；
• 黄色盒子与蓝色盒子的右下角重叠（黄色盒子左上角对应蓝色盒子右下角）；
• 红色盒子位于蓝色盒子下方，间距为一个盒子的高度。

实际表现 #

蓝色和红色盒子位置符合预期，但黄色盒子仅按预期向右偏移，未垂直偏移，也未与蓝色盒子重叠。

已发现现象 #

若将middle元素CSS中的top:100px改为top:300px，黄色盒子会向下移动并与红色盒子重叠，符合预期。

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