掌握CSS Sticky定位：实现元素在父容器右侧的优雅对齐

<div class="container">
  <div class="sticky-element">
    <button>按钮 1</button>
    <button>按钮 2</button>
  </div>
  <div class="other-stuff">
    <p>这里是其他内容，它不会因为粘性元素的右对齐而上移或受到干扰。</p>
    <p>本段落展示了内容流的正常行为。</p>
    <!-- 更多内容以模拟滚动 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Curabitur pretium tincidunt lacus. Nulla facilisi. Aenean et est a felis convallis laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eu massa at nulla ultrices eleifend. Fusce eu diam at orci congue eleifend. Aliquam erat volutpat.</p>
    <p>Suspendisse potenti. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut sit amet quam in turpis varius euismod. Nulla facilisi. Sed non risus at sapien eleifend tincidunt. Praesent at nibh vel diam feugiat dignissim. Nam a dolor a odio malesuada interdum.</p>
    <p>Donec nec lacus id nisl malesuada tristique. Aliquam erat volutpat. Sed vitae magna nec odio lacinia hendrerit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, vitae, ornare is est.</p>
  </div>
</div>

.container {
  background-color: cyan; /* 方便观察父容器范围 */
  height: 1000px; /* 模拟可滚动内容 */
  position: relative; /* 如果sticky元素需要参照此容器，通常需要设置，但在此特定场景下并非强制 */
  padding: 20px; /* 为内容留出一些空间 */
}

.sticky-element {
  position: sticky; /* 启用粘性定位 */
  top: 20px; /* 当元素距离视口顶部20px时，开始粘性 */
  width: max-content; /* 宽度自适应内容 */
  margin-left: auto; /* 将元素推向右侧 */
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border-radius: 5px;
  display: flex; /* 可选：如果内部按钮需要水平排列 */
  gap: 10px; /* 可选：按钮间距 */
}

.other-stuff {
  margin-top: 30px; /* 确保其他内容不会直接覆盖粘性元素 */
  padding: 20px;
  background-color: #fff;
  border: 1px dashed #999;
}

button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}