如何实现不干扰其他区块的自动扩展输入框？

嘿，我来帮你搞定这个问题！首先得搞明白为啥原来的方法会挤动下方文本——你的输入框处于正常文档流里，修改它的height会改变它在页面布局中占据的空间，自然会把下面的元素挤下去。这时候单纯加z-index没用，因为z-index只管层叠顺序，管不了元素的布局空间占用。

核心思路：让输入框增高时不额外占用布局空间 #

最简单的办法是给输入框设置position: relative，再配上不透明背景和足够高的z-index，这样输入框增高的部分就会盖在下方内容上面，而不是把它们挤走。

第一步：添加CSS样式

#box {
  position: relative;
  z-index: 2; /* 只要比下方元素的z-index高就行，确保能覆盖住 */
  background-color: #fff; /* 一定要设不透明背景，不然下面的文字会透出来 */
}

第二步：优化原有JS动画逻辑

$('#box').focus(function() {
  // 只在第一次聚焦时存储初始高度，避免重复赋值
  if (!$(this).attr('data-default')) {
    $(this).attr('data-default', $(this).height());
  }
  $(this).animate({ height: 150 }, 'slow');
}).blur(function() {
  // 恢复到初始高度
  var originalHeight = $(this).attr('data-default');
  $(this).animate({ height: originalHeight }, 'slow');
});

这样改完之后，输入框聚焦变高时，只会在原来的占位基础上向下扩展，直接覆盖下方的文本，再也不会挤动它们啦。

不想自己写？试试这些插件 #

如果嫌自己写麻烦，也可以用现成的插件：

• autosize：专门用来让textarea（或输入框）根据内容自动调整高度，配合上面的定位技巧就能实现覆盖效果。
• Textarea Auto Expand：轻量级小插件，专注处理输入框高度自适应，还支持自定义动画和布局行为。

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