Input内Span定位问题：小屏幕下Span不随Input框移动

我来帮你搞定这个放大镜定位的问题！你现在遇到的核心问题是：绝对定位的放大镜没有正确的定位参考父元素，导致它跟着整个文档走，而不是跟着输入框走。当窗口缩小输入框换行时，自然就脱节了。

解决方案思路 #

给输入框和放大镜套一个相对定位的容器，让放大镜相对于这个容器定位——这样不管容器怎么移动（比如换行），放大镜都会牢牢“粘”在输入框旁边。同时调整输入框的内边距，避免文字被放大镜挡住。

修改后的完整代码 #

HTML结构

<select id="documentscomparator" class="dropdown" name="documentscomparator"> 
  <option value="LIKE">like</option>
  <option value="EQUALS">equals</option> 
  <option value="NOTEQUALS">not equals</option> 
  <option value="GREATERTHAN">greater than</option> 
  <option value="LESSTHAN">less than</option> 
  <option value="BETWEEN">between</option> 
  <option value="ISNULL">is null</option> 
  <option value="NOTNULL">is not null</option> 
  <option value="IN">in</option> 
</select> 
<div class="input-wrapper">
  <span class="magnifyingGlass"></span> 
  <input type="text" value="">
</div>

CSS样式

/* 新增的容器，作为放大镜的定位参考 */
.input-wrapper {
  position: relative;
  display: inline-block; /* 让容器宽度和输入框一致 */
}

span.magnifyingGlass {
  width: 1.6em;
  position: absolute;
  right: 3px; /* 贴紧输入框右侧 */
  top: 50%;
  transform: translateY(-50%) rotate(45deg); /* 垂直居中+旋转图标 */
  z-index: 999;
}

span.magnifyingGlass:before {
  width: 1.6em;
  content: "⚲";
  font-size: 1.2em;
  text-align: center;
  display: block;
}

input[type="text"] {
  border-radius: 3px;
  border: 1px solid lightgrey;
  padding: 0.3em 2em 0.3em 0.5em; /* 右侧留空间给放大镜，同时上下加内边距让输入框更美观 */
  display: inline-block;
  vertical-align: middle;
}

关键修改点说明 #

• 添加.input-wrapper容器：设置position: relative后，里面的绝对定位元素会以这个容器为基准，而不是整个页面。
• 优化放大镜定位：用top:50% + translateY(-50%)实现完美垂直居中，right:3px让它固定在输入框右侧内部。
• 调整输入框内边距：给右侧加足够的内边距，防止输入的文字被放大镜遮挡，同时上下加内边距让输入框更美观。

这样调整后，不管你怎么缩小浏览器窗口，输入框换行到下拉框下方时，放大镜都会跟着一起移动，始终保持在输入框的右侧内部，完美符合你的期望效果~

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