在调整大小窗口上标记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