Question

html5切图,怎么在img上面固定input标签的位置

我是在做手机站,然后背景是用img做的,这样能够自适应变大小,但是不知道怎么将input标签放在上面,,,用position:absolute;的话,left top 用百分比还是不行

Answer 1

因为 img、input 都是自闭合标签，所以，无法简单的让 input 固定在 img 上 。

要想 input 把固定在 img 上，要运用点小技巧，借助一个 div 作为容器，然后，图片没有特殊要求不用动，input 做绝对定位 。

html：

<div class="box">
<img src="test.jpg" />
<input type="text" />
</div>

CSS：

.box { position:relative; }
.box input { position:absolute; left:0px; top:0px; }

说明：因为 img 没有定位，所以，它会自动填充 div，你要做的就是 调整 input 的 left、top 进行定位就行了 。

.

Answer 2

首先将img和input都放在<div>里面(反正我做网页是都是将任何标签都放在<div>里面，这样形成模块化，容易控制！)
<div>里面有个z-index属性，z-index越大，就越现实在上层！如果你设置img的<div>的z-index=0，input的<div>的z-index=1就行了
当然如果你不用<div>也行 ，个人习惯。直接在img和input的style属性中设置z-index也行！

追问

这个方法就必须要用position:absolute;了,,,用这个的百分比布局,手机端不兼容,,,

追答

那这样吧，背景不用 直接用style=“background:url(aa.jpg)‘,这样就不影响input了

追问

但是,background不能按比例缩放,,,,,,,,,,