Sticky div 的奇怪行为

Question

我正在尝试让我的 div 粘性定位。我对 div 定位的奇怪行为感到困惑。根据上面的代码，它按预期工作，但是如果我尝试将粘性 div 移动到具有橙色背景的 div 内，则它不起作用。有人可以帮我解释这种奇怪的行为吗？

div.one {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}

<h2>Sticky Element: Scroll Down to See the Effect</h2>
<p>Scroll down this page to see how sticky positioning works.</p>
<div style="background:red; padding:10px">
  <div>
    <div style="background:orange">
      <p>Just some random text
        <p>
          //If sticky div (class="one") moved here then doesn't work
    </div>
    <div class="one">This is sticky</div>
    <div class="two" style="background:green;height:1200px">
      <h1>Remaining</h1>
    </div>
  </div>
</div>