CSS fixed定位中right:0的含义及偏移属性设置问题

偏移属性0的含义与元素定位到右下角的原因 #

设置position: fixed的元素，常规场景下以浏览器视口（当前可见的网页区域）为定位参考系，位置不随页面滚动变化，也不受普通父元素位置影响。
四个偏移属性设置为0的含义非常明确：

• top: 0：元素上外边界和视口顶部边缘的间距为0
• bottom: 0：元素下外边界和视口底部边缘的间距为0
• left: 0：元素左外边界和视口左侧边缘的间距为0
• right: 0：元素右外边界和视口右侧边缘的间距为0
  初始代码中给div设置了固定宽度width: 300px，搭配bottom: 0; right: 0，相当于要求浏览器将这个300px宽的元素下边缘贴视口底部、右边缘贴视口右边缘，高度随内容自适应，元素自然会固定在视口右下角。
  初始代码参考：

div.fixed {
  position: fixed;
  width: 300px;
  bottom: 0;
  right: 0;
  border: 3px solid #73ad21;
}

<h2>position: fixed;</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
  This div element has position: fixed;
</div>

同时设置四个方向偏移为0时元素无法延伸到右侧的原因 #

这个现象由CSS定位的过度约束渲染规则导致：
对于fixed/absolute定位的元素，如果同时给水平方向对立偏移left+right、垂直方向对立偏移top+bottom设置了非auto值，在没有手动设置固定宽高的前提下，浏览器会自动拉伸元素，让元素刚好填满四个偏移围成的区域。
如果手动给元素设置了固定width: 300px，水平方向会同时存在left:0、right:0、width:300px三个不可能同时满足的约束，触发过度约束处理逻辑：

• 默认从左到右（ltr）的页面书写模式下，水平方向left属性优先级最高，浏览器会优先保证left:0和固定宽度生效，直接忽略right:0的设置
• 最终元素会贴在视口左侧，宽度保持300px，右边缘距离视口右侧有明显空隙，看起来就是边框无法延伸到右侧
  如果需要元素在四个偏移都设为0时铺满整个视口，删掉手动设置的width（如果设了固定height也要同步删除）即可。
  补充一个常见渲染细节：Windows系统下浏览器的侧边滚动条会占据十几像素的视口宽度，就算元素完全拉满视口宽度，最右侧的边框也可能被滚动条遮挡，看起来像没有贴边，属于浏览器默认渲染行为，不是样式写法错误。

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