我什么时候应该使用 Position:Sticky 和 ​​Position:Fixed？

<code class="html"><div class="container">
  <div class="sticky-element">Sticky Element</div>
  <div class="fixed-element">Fixed Element</div>
</div></code>

<code class="css">.container {
  height: 100vh; /* Set the container to full viewport height */
  overflow-y: scroll; /* Enable vertical scrolling within the container */
}

.sticky-element {
  position: sticky;
  top: 10px; /* Specifies the offset from the top before stickiness applies */
  width: 200px;
  height: 200px;
  background-color: blue;
}

.fixed-element {
  position: fixed;
  top: 0; /* Sets the fixed position from the top of the viewport */
  width: 200px;
  height: 200px;
  background-color: red;
}</code>