求助：旋转后将按钮固定在屏幕左侧的实现问题

嘿，我明白你想做一个固定在屏幕左侧的旋转Feedback按钮，现在用position: absolute没达到预期效果，主要是这几个原因，我给你拆解并修改代码：

核心问题分析 #

• 定位参考错误：position: absolute 会相对于最近设置了position: relative/absolute/fixed的父元素定位，如果没有这样的父元素，它会相对于整个文档。如果你的需求是固定在屏幕左侧不随页面滚动，其实用position: fixed（相对于视口定位）更合适。
• 旋转后的坐标偏移：transform: rotate(270deg) 会改变元素的自身坐标系，原来的top和left设置会因为旋转变得不符合预期，需要调整定位属性来适配旋转后的元素。
• 旋转后的位置校准：旋转270度后，元素的“顶部”和“左侧”方向已经改变，需要通过调整transform-origin和定位值来让按钮刚好贴在屏幕左侧。

修改后的代码 #

HTML #

<a class="feedback__btn">Feedback</a>

CSS #

.feedback__btn {
  /* 改用fixed固定在视口，不随滚动移动 */
  position: fixed;
  /* 旋转的原点设置在元素的右下角，这样旋转后能刚好贴住左侧 */
  transform-origin: bottom right;
  /* 旋转270度 */
  transform: rotate(270deg);
  /* 定位到视口的左下角区域，配合旋转原点调整位置 */
  bottom: 50%;
  left: -55px;
  background: green;
  width: 150px;
  height: 45px;
  color: red;
  z-index: 9;
  display: inline-block;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 45px;
  border-radius: 0 0 4px 4px;
  /* 加上鼠标指针样式，提升交互感 */
  cursor: pointer;
}

关键改动说明 #

1. 替换position: absolute为position: fixed：确保按钮始终固定在屏幕左侧，不会随页面滚动而移动，完全符合“固定在屏幕左侧”的需求。
2. 设置transform-origin: bottom right：旋转时以元素的右下角为原点，这样旋转270度后，元素的右上角会刚好对齐到屏幕左侧边缘，避免偏移。
3. 调整定位值bottom: 50%和left: -55px：
   • bottom: 50%让按钮垂直居中于视口
   • left: -55px是因为元素宽度150px，旋转后横向的占位变成了高度45px，计算后向左偏移55px（(150-45)/2），刚好让按钮完全贴在左侧，不会露出多余部分。
4. 添加cursor: pointer：让用户知道这是可点击的按钮，提升交互体验。

如果你的需求是相对于某个父元素固定（而不是整个屏幕），那可以把position: fixed改回position: absolute，但要给父元素加上position: relative，然后调整对应的定位值和旋转原点即可。

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