转换

Question

我正在尝试创建屏幕左侧的<a>元素。它的位置是绝对的，但我不能像在图像中那样得到它：

HTML：

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

CSS：

.feedback__btn {
  position: absolute;
  top: 11.5%;
  left: 0;
  background: green;
  width: 150px;
  height: 45px;
  color: red;
  z-index: 9;
  display: inline-block;
  transform: rotate(270deg);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 45px;
  border-radius: 0px 0px 4px 4px;
}

导致标签不固定到左侧的两件事：变换和宽度/高度。如何通过相同的转换将其固定到屏幕的任一侧（在本例中为左侧）？

Answer 1

如果移动按钮的中心点，使用transform：translateX（-50％），您将有一个更简单的方法来计算移动按钮以正确放置它所需的量：

.feedback__btn {
  position: fixed;
  top: 11.5%;
  left: 23px;
  background: green;
  width: 150px;
  height: 46px;
  color: red;
  z-index: 9;
  display: inline-block;
  transform: translateX(-50%) rotate(270deg);
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 45px;
  border-radius: 0px 0px 4px 4px;
}

我已将transform: translateX(-50%) rotate(270deg);和left: 23px;添加到您的代码中，并将按钮的高度更改为偶数，因为这更容易减半（46的一半是23，而45的一半是22.5，你不能有半像素。）

我还将位置更改为固定，因此滚动时会跟随用户关注网站。