如何将输入框放置在标题文本末尾而非容器后，避免缩放重叠？

之前的实现只要缩放窗口就出现文本和输入框重叠，核心是两个设计缺陷：

• 绝对定位的参照对象是外层.div-heading容器，而非实际承载标题文本的.heading-2元素
• 给.search写死了margin-left: 239px、margin-top: -89px的硬编码像素偏移，这个值不会跟随标题文本的实际宽度、窗口缩放后的排版动态调整，只要排版位置有变化，硬算的偏移位置就和文本末尾的实际位置脱节，自然会出现重叠。

方案1：行内流式内嵌（零错位风险，优先推荐） #

完全放弃硬偏移的绝对定位逻辑，从排版逻辑上保证输入框跟随文本：

• 调整DOM结构：把.search元素直接移动到标题文本节点的末尾，作为.heading-2的直接子元素，和标题文本处在同一个行排版流中
• 调整对应CSS：
  • 移除.search上的position: absolute、固定margin-top、固定margin-left属性
  • 给.search设置display: inline-block、vertical-align: middle、margin-left: 12px，适配52px大字号标题的垂直对齐
• 实际效果：输入框会永远紧跟标题文本的最后一个字符，不管窗口如何缩放、标题文本长度如何变化，输入框都会随文本自动移动，完全不会出现重叠错位。

方案2：修正绝对定位的锚点逻辑（保留原有DOM结构可用） #

如果受限于现有DOM结构必须使用绝对定位，不要用硬编码像素偏移，直接把定位锚点绑定到承载标题文本的元素上：

• 给.heading-2添加position: relative，作为.search的定位参照，替代之前的外层.div-heading
• 重写.search的定位属性，替换掉硬编码margin值：

  .search {
    position: absolute;
    top: 50%;
    left: 100%; /* 直接锚定在标题元素的最右边界，也就是文本的末尾位置 */
    transform: translateY(-50%); /* 垂直居中，替代之前硬编码的负margin-top */
    margin-left: 12px; /* 只保留和文本的固定水平间距即可 */
    display: flex;
    padding-left: 10px;
  }
  

• 这个写法的偏移值是相对于标题元素的实际宽度动态计算的，没有写死的像素数，窗口缩放时会自动跟随文本末尾的位置移动，不会出现重叠。

避坑提醒：不要继续用外层容器做定位参照写死margin值，这种写法只要排版差1个像素都会出现错位。

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