fixed定位侧边导航栏设置float:right无效，如何调整至页面右侧

问题根源 #

float 属性仅对标准文档流内的非定位元素生效，你的侧边栏设置了position: fixed，属于完全脱离文档流的固定定位元素，float规则对它完全不生效，这是之前调整失败的核心原因。
同时你现有代码中明确写了left: 0，相当于强制把侧边栏固定在视口左侧，自然无法靠float移动到右侧。

修复方案 #

把.sideNav选择器里的left: 0替换为right: 0，同时删除无效的float: right属性即可，调整后的CSS代码如下：

.sideNav {
  height: 100%;
  width: 0; /* 该值为侧边栏折叠状态宽度，默认展开的话请改为实际需要的尺寸，比如80px */
  background-color: red;
  position: fixed;
  z-index: 1 !important;
  bottom: 4.5vh;
  right: 0; /* 将原left:0替换为这行 */
  background-color: #fff;
  padding-top: 60px;
}

如果需要侧边栏和右侧视口边缘保留间距，直接修改right的数值即可，比如right: 16px就会在右侧预留16px的空白。

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