Html 变换时将按钮固定到左侧
我正在尝试创建此Html 变换时将按钮固定到左侧,html,css,Html,Css,我正在尝试创建此 HTML: <a class="feedback__btn">Feedback</a> .feedback__btn { position: absolute; top: 11.5%; left: 0; background: green; width: 150px; height: 45px; color: red; z-index: 9; display: inline-block; transform: r
HTML:
<a class="feedback__btn">Feedback</a>
.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;
}
导致标记不向左固定的两个因素:变换和宽度/高度。如何使用相同的变换将其固定到屏幕两侧(本例中为左侧)?如果使用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%)旋转(270度)代码>和左:23px代码>更改为您的代码,并将按钮的高度更改为偶数,因为这更容易减半(46的一半是23,45的一半是22.5,不能有一半像素)
我还将位置更改为“固定”,因此在滚动时,它会跟随用户沿站点向下移动。为什么是绝对位置,这些位置必须固定,否则如果滚动,它将相应地更改位置。如果你想要CSSCORECT,请告诉我。但将其修复并不能解决问题;)左图:-51px将完成您的工作,并且转换原点:左上角代码>谢谢