设置position:absolute后，input元素keyup时位置为何随宽度改变？

嘿，我来帮你搞定这个头疼的问题！你遇到的核心原因其实是给input加了旋转transform后，CSS的宽高逻辑和视觉上的宽高搞混了，再加上默认的变换原点是元素中心，导致调整宽度时元素会围绕中心偏移。

咱们一步一步来修复：

先搞懂问题根源 #

当你给input设置rotate(-90deg)后，元素的坐标系跟着旋转了：CSS里的width对应视觉上的"高度"，height对应视觉上的"宽度"。而且默认的transform-origin: 50% 50%（元素中心）会让你调整宽度时，元素往中心两边缩放，自然就会偏移原来的位置。

方案1：固定变换原点，调整宽高计算逻辑 #

咱们把变换原点改成元素的左下角，这样调整宽度时，元素只会往一个方向延伸（旋转后的上方），不会偏移位置。同时调整字符宽度的系数，适配实际显示：

修改后的完整代码 #

HTML（和你的原代码一致）

<!DOCTYPE html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="parent">
  <div class='yyy'><input class='test' type="text" value='jjjj'></div>
</div>
</body>
</html>

CSS 关键修改

#parent {
  position: relative;
  width: 400px;
  /* 给父级加个高度，避免容器塌陷看不到元素 */
  height: 400px;
}

#parent div {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 300px;
}

#parent div input {
  position: relative;
  /* 重点：把变换原点设为左下角，旋转后宽度变化只会向上延伸 */
  transform-origin: bottom left;
  /* 统一标准transform属性，兼容各浏览器 */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  /* 初始宽度按默认字符数设置 */
  width: 40px;
  /* 固定input高度，避免干扰布局 */
  height: 24px;
}

JavaScript 调整系数

$('.test').keyup(function(){
  var contents = $(this).val();
  var charlength = contents.length;
  /* 调整字符宽度系数，根据你用的字体大小来改，这里16是适配常规字体的数值 */
  newwidth = charlength * 16;
  $(this).css({width: newwidth});
});

方案2：把旋转放到父容器，让input保持正常布局 #

如果觉得旋转input容易搞混宽高逻辑，更稳妥的方式是把旋转加到input的父容器上，input本身不旋转，这样调整input宽度时，完全遵循正常的布局逻辑，不会有偏移：

CSS 修改部分 #

#parent {
  position: relative;
  width: 400px;
  height: 400px;
}

#parent div.yyy {
  position: absolute;
  left: 5px;
  top: 300px;
  /* 把旋转放到父容器上，设置变换原点 */
  transform-origin: bottom left;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#parent div input {
  position: relative;
  width: 40px;
  height: 24px;
  /* 去掉input自己的旋转 */
}

JS部分和方案1完全一样，这样input的宽度变化只会沿着自身水平方向延伸，父容器的旋转只是视觉效果，布局逻辑完全正常。

小提示 #

• 可以根据你实际使用的字体大小，调整JS里的字符宽度系数（比如用14或18），让宽度更贴合实际字符长度
• 如果需要更精确的宽度计算，可以用getBoundingClientRect()获取实际字符的宽度，但对于简单场景，固定系数足够用啦

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