CSS实现子元素始终贴靠屏幕右侧且非固定显示的问题

你当前用fixed定位的问题在于，该定位是相对于视口固定，页面滚动时元素不会随页面移动，因此始终可见，不符合需求。可以通过以下方式调整：

利用position: absolute结合calc()计算小盒子的右侧偏移量，让它既保持为大盒子的子元素，又能始终贴紧屏幕右侧，同时滚动时会随大盒子一起移动：

#bigbox{
    border: 1px solid;
    height: 400px;
    width: 400px;
    background-color: green;
    position: absolute;
    left: 0; /* 明确大盒子左侧定位 */
}
#smallbox{
    border: 1px solid;
    height: 200px;
    width: 200px;
    background-color: blue;
    position: absolute;
    /* 计算父元素右侧到屏幕右侧的距离，让小盒子右边缘贴紧屏幕 */
    right: calc(100vw - 100%);
    top: 0; /* 可根据需求调整垂直位置 */
}

原理说明 #

• 100vw代表当前视口的宽度，100%代表父元素#bigbox的宽度，两者的差值就是父元素右侧到屏幕右侧的距离。
• 给小盒子设置right: calc(100vw - 100%)，就能让它的右边缘刚好对齐屏幕右侧，窗口尺寸变化时，100vw会自动更新，保持贴边效果。
• 小盒子使用absolute定位（相对于父元素#bigbox），页面滚动时会随父元素一起移动，不会像fixed那样固定在视口内始终可见。

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