如何实现右侧sticky元素悬浮且不影响其他元素的全宽显示

要实现右侧sticky元素不压缩页面全宽元素的宽度，同时保持sticky效果，你可以按以下方式修改：

• 移除浮动，改用粘性定位脱离文档流
  原来的float: right会让文档流中的元素自动避开，导致宽度被压缩。我们需要让sticky元素脱离文档流，同时保持滚动时的固定效果：

  .sticky {
    position: sticky;
    top: 20px; /* 可自行调整距离顶部的间距 */
    right: 20px; /* 可自行调整距离右侧的间距 */
    width: 200px; /* 设置固定宽度，避免自适应 */
    background: pink;
    padding: 10px;
    z-index: 10; /* 确保元素在其他内容上方，防止被覆盖 */
    float: none; /* 移除浮动，避免压缩其他元素宽度 */
    margin: 0; /* 清除默认边距 */
  }
  

• 确保全宽元素正常显示
  给所有全宽元素添加box-sizing: border-box，确保内边距不会额外增加宽度；如果需要避免内容被sticky元素覆盖，可给这些元素添加右侧内边距：

  .full-width {
    width: 100%;
    padding: 20px;
    background: #eee;
    margin: 10px 0;
    box-sizing: border-box;
    padding-right: 240px; /* 数值 = sticky元素宽度 + 两侧预留间距，按需调整 */
  }
  

修改后，所有全宽元素会保持100%宽度，sticky元素固定在右侧，滚动时会跟随页面移动，且不会对其他元素的布局造成影响。

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