更新

Question

我有以下代码接近我想要的但它并不完全位于右下方。

＆＃13;

#top-btn a {
  position: fixed;
  display: block;
  z-index: 500;
  height: 40px;
  padding: 20px;
  margin: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
  transform-origin: bottom left;
}

＆＃13;

<div id='top-btn'>
  <a href="..." onclick="...">Back Up</a>
</div>

＆＃13;

Answer 1

<a>没有恰好位于右下方有几个原因：

height和padding不是必需的。它只会在轮换后扩大<a>的大小并带来问题。
我明白为什么你现在将transform-origin定义为bottom left - 没有它，<a>的一部分将是不可见的。但是，此设置会在<a>的右侧留下空白区域 - 空白区域的宽度正好是<a>的原始宽度。这就是@DDan和@Zhenya Telegin的答案使用否定margin-right来解决问题的原因。但由于margin-right值是固定数字，因此仅适用于＆＃34;备份＆＃34;。

如果右下角文本是动态的，margin-right值也应该是动态的。这是JavaScript的解决方案：

＆＃13;

var ele = $('#top-btn a');
ele.css('margin-right', -ele.width()+'px');

＆＃13;

#top-btn a {
  position: fixed;
  display: block;
  z-index: 500;
  margin: 0;
  bottom: 0; right: 0;
  transform: rotate(-90deg);
  transform-origin: bottom left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='top-btn'>
   <a href="..." onclick="...">Back Up</a>
</div>

＆＃13;

我尝试了几个纯CSS解决方案，但都失败了，期待有人用纯CSS解决这个问题。

Answer 2

我认为轮播原因问题...您可以删除height: 40px;并添加负边距 margin-right: -55px;

#top-btn a {
  position: fixed;
  display: block;
  z-index: 500;
  margin: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
  transform-origin: bottom left;
  margin-right: -55px;
}

<div id='top-btn'>
  <a href="..." onclick="...">Back Up</a>
</div>

Answer 3

你可以在这里做两个技巧：

遗漏transform-origin
您可以设置负右边距以将其移到侧面。请参阅css。{/ li>中的margin-right

＆＃13;

#top-btn a {
  direction: rtl;
  position: fixed;
  display: block;
  z-index: 500;
  height: 40px;
  padding: 20px;
  margin: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
  margin-right: -40px; 
}

＆＃13;

<div id='top-btn'>
  <a href="..." onclick="...">Back Up</a>
</div>

＆＃13;

Answer 4

我的工作方式与您在下面的代码段中描述的一样。像其他人说的那样height是有问题的。但是，我没有打扰使用正确的边距，而是使用transform-origin％的值来解决它。

#top-btn a {
  position: fixed;
  display: block;
  z-index: 500;
  padding: 20px;
  margin: 0;
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 10%;
}

<div id='top-btn'>
  <a href="..." onclick="...">Back Up</a>
</div>

更新

我找到了一个更好的解决方案，适用于任何长度的文本。查看fiddle以获得更好的解决方案。

右下角，旋转文字

4 个答案:

更新