在调整大小窗口或旋转移动设备上标记img位置

Question

如果窗口最大化，或者手机处于纵向位置，放大镜的位置就在你的位置(没关系)。

当我调整窗口大小或旋转手机时，放大镜的位置会移动。

我试着把单位放在px，em，vw，显示内联，弯曲，块或内嵌块等，位置相对等，但结果相同。

我怎么才能解决这个问题？

谢谢

PS。请原谅我的英语。

HTML：

...
<div id="input_search">
  <form method="post">
   <input type="text" name="search" id="search" maxlenght="50" value="" placeholder="Search..."></input>
  </form>
  <img id="lupa" src="img/lupa.png">
  <img id="back" src="img/back.png">
</div>
...

CSS：

#input_search input {
   background-color: #ffa366;
   color: black;
   padding: 15px 0px;
   float: left;
   border: 0px;
   font-size: 16px;
   margin: 1% 0px 1% 0px;
   width: 100%;}

.indent1 {
   text-indent: 17px;
}

.indent2 {
   text-indent: 57px;
}

#lupa {
   float: right;
   height:24px;
   margin-top: -11%;
   margin-right: 1%;
}

Answer 1

我假设你想把图像定位在输入里面？如果是这样，另一个选项是使用background-image属性。

见下面的片段。

*而且，我认为<input>不需要在HTML5中使用结束标记

​

#input_search input {
  background-color: #ffa366;
  color: black;
  padding: 15px 0px;
  float: left;
  border: 0px;
  font-size: 16px;
  margin: 1% 0px 1% 0px;
  width: 100%;
}

#search {
  background-image: url('https://placehold.it/30x30');
  background-size: 35px 35px;
  background-repeat: no-repeat;
  background-position: right 7px bottom 7px;
}

<div id="input_search">
  <form method="post">
   <input type="text" name="search" id="search" maxlenght="50" value="" placeholder="Search...">
  </form>
</div>

​

CODEPEN