如何在同一表单的按钮元素上叠加放置文本输入框？

你之前使用float的方案无法实现叠加效果，本质是因为float属于流式布局属性，只会让元素在文档流内浮动排列，不会触发层级叠加。要实现兼容性好、无需硬编码margin的内嵌叠加效果，推荐使用相对定位+绝对定位的标准布局方案，全主流浏览器兼容（支持IE8及以上版本），无硬编码适配问题。

具体实现代码 #

你的现有HTML结构不需要做任何调整，仅修改CSS即可：

/* 表单作为定位基准容器 */
form {
  position: relative;
  width: 200px; /* 与按钮宽度匹配 */
}

.action {
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  /* 给右侧输入框预留展示空间，避免按钮文字被遮挡 */
  padding: 0 40px 0 8px;
  height: 32px; /* 可根据设计需求调整高度 */
}

.quantity {
  width: 30px;
  /* 绝对定位相对于父级form做偏移 */
  position: absolute;
  right: 5px;
  /* 垂直自动居中，无需写死top偏移值 */
  top: 50%;
  transform: translateY(-50%);
}

方案优势 #

• 无硬编码固定margin值：输入框自动贴右、垂直居中，后续调整按钮、输入框尺寸时不需要重新计算偏移量
• 兼容性强：完全符合CSS2.1+标准，在所有现代浏览器及老旧IE版本下表现一致
• 层级关系自然：绝对定位元素默认层级高于普通文档流元素，无需额外设置z-index即可实现叠加在按钮上方的效果
• 体验合理：按钮预留了右侧内边距，按钮文字不会被输入框遮挡，不会出现文字压在输入框下的显示问题

注意：如果需要兼容IE8等不支持transform的极老旧浏览器，可以把垂直居中的写法换成固定top值配合输入框高度计算，例如输入框高度为22px、按钮高度为32px时，设置top: 5px即可，偏移量计算逻辑简单，跨浏览器表现稳定。

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