如何消除CSS中position:relative元素导致的动画卡顿与多余间距？

问题 #

我给带多个输入框的搜索组件添加了第二个占位元素（如<span class="placeholder2" >Insert banana number:</span>），实现点击搜索框时的文本切换效果，但出现两个问题：

• 点击输入框开始输入后动画卡顿抖动，第一个搜索框尤为明显
• 搜索框之间出现多余间距，对比移除placeholder2的"apples"和"peach"间距正常，带placeholder2的"bananas"和"apples"间距异常

需要实现：

1. 消除动画卡顿抖动
2. 移除placeholder2造成的多余间距

怀疑问题源于占位符使用了position: relative;，尝试过多种方法，但无法在不破坏搜索框与SEARCH按钮布局的前提下解决，求可行修复或替代方案。

修复方案 #

1. 解决多余间距问题 #

核心原因：position: relative的元素仍会占据原始文档流空间，placeholder2的存在给容器额外增加了高度，导致间距异常。

修改方案：将占位符改为绝对定位，让它们脱离文档流，同时给父容器设置相对定位作为参考：

/* 给占位符的父容器添加相对定位和固定高度 */
.topnav {
  position: relative;
  height: 40px; /* 和输入框高度保持一致 */
}

/* 重构第一个占位符的定位 */
.placeholder {
  position: absolute; /* 替换原有的relative */
  top: 8px;
  left: 8px;
  /* 移除原有的top: -32px、right: -5px等相对偏移 */
}

.input:focus~.placeholder {
  top: -20px;
  left: 5px;
  opacity: 0;
}

/* 重构第二个占位符的定位 */
.placeholder2 {
  position: absolute; /* 替换原有的relative */
  top: 8px;
  left: 8px;
  opacity: 0;
  /* 移除原有的top: -50px、right: 0px等相对偏移 */
}

.input:focus~.placeholder2 {
  top: -20px;
  left: 5px;
  opacity: 1;
}

2. 解决动画卡顿抖动问题 #

核心原因：输入框聚焦时同时修改margin和scale属性，触发浏览器布局重排（reflow），加上相对定位占位符的偏移触发额外重绘，导致抖动。

修改方案：

• 用transform: scale()替代原生scale属性，保持兼容性
• 用transform: translate()替代margin调整位置，避免触发布局重排
• 添加will-change提示浏览器提前优化动画

修改后的输入框聚焦样式：

span input[type="text"]:focus,
span input:focus {
  /* 移除原有的margin: 3px; */
  transform: scale(1.03) translate(-1px, -1px); /* 用translate替代margin调整位置 */
  border-color: #e63f3f;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(233, 102, 102, 0.6);
  will-change: transform, box-shadow; /* 提示浏览器优化动画 */
}

另外，需移除原有CSS中.input:hover之后的无效字符s，避免后续CSS解析异常。

效果验证 #

• 占位符脱离文档流，搜索框之间的间距完全统一
• 动画仅触发合成层变换（transform），无布局重排，卡顿抖动彻底消失
• 搜索框与按钮的位置、尺寸等原有布局完全保留

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