请问一个css定位问题，困扰好久了，

[qingwadaxia_1]

如上图有姓名和电话两个表单，他们是图片形式的，我要把input输入框定位在对应的姓名和电话的图片上，

在不同分辨率下，自己定位写的input的表单高度有的会超出，这种情况下，高度怎么设置呢？

<style>
*{margin:0;padding:0;}
.pie2{position:relative;}
.pie2 img{width:100%;}
.input_1{position: absolute;
top: 22%;
left: 33%;
width: 11%;
height: 10.5%;}
input{outline:none;}
input{border:none;}
</style>

<div class="pie pie2">
<img src="images/pcznq_03.jpg">
<input class="input_1" placeholder="请输入姓名" name="xingming" id="xingming1" type="text">
<input class="input_2" placeholder="请输入电话" name="dhhm" id="dhhmz2" type="text">
</div>

[LJ_liujue]

引用 4 楼 qingwadaxia_1 的回复:

感谢大家的回答，我知道表单是自己写，我问这个问题，纯粹是自己想了解下，绝对定位下，如果写高度，要考虑和图片在不同分辨率下适应，这个高度应该怎么计算出来或者怎么写，

每个浏览器内核的边距计算方式是不一样的。因此不要针对浏览器去绝对定位。建议是固定一个div的大小，将图片设置为div背景。在div中进行定位。这样达到的效果会好于浏览器中的绝对定位。

[WeiflR10]

白色的背景自己写啊?为什么要用图片?这样实现的效果就是不太好。

[jio可]

一般这种都不会做成背景图吧，各种屏幕的图片缩放不一样。一般情况是会固定大小的。再说这个背景效果css都可以写出来。

[Eritque arcus]

图片也跟着分辨率缩放，然后表单是相对定位应该是就可以的

[Armouy]

您好，按照正常的生产环境，UI会给你绿色部分的图片，然后黑色框框住的东西，应该直接用代码编写。

// bg设置背景图，left跟right根据bg 进行absolute定位
<div class="bg">
  <!-- 左边是表单 -->
  <div class="left"></div>
 <!-- 右边是报名成功的客户 -->
 <div class="right"></div>
</div>

[qingwadaxia_1]

感谢大家的回答，我知道表单是自己写，我问这个问题，纯粹是自己想了解下，绝对定位下，如果写高度，要考虑和图片在不同分辨率下适应，这个高度应该怎么计算出来或者怎么写，

[天际的海浪]

.input_1 的top和height都用的是百分比。那么.pie2就必须明确设置固定的height值才行。 否则.input_1的top和height就不要用百分比。

[kmokd]

你的问题是：能否用定位的方法，让表单和图片适应不同分辨率，同步变化？
回答：可以。对表单和图片的定位用相同的方法和相同的数值。但是img必须加上 z-index:-1;
img {
position: absolute;
top: 22%;
left: 33%;
width: 11%;
height: 10.5%;}
z-index:-1;
}

[qingwadaxia_1]

引用 7 楼 kmokd 的回复:

你的问题是：能否用定位的方法，让表单和图片适应不同分辨率，同步变化？ 回答：可以。对表单和图片的定位用相同的方法和相同的数值。但是img必须加上 z-index:-1; img { position: absolute; top: 22%; left: 33%; width: 11%; height: 10.5%;} z-index:-1; }

对，就是这个意思，您的意思是，我上面的代码没问题，只是再加一个z-index:-1;就可以了吗，这是什么原理呢？

[qingwadaxia_1]

引用 7 楼 kmokd 的回复:

你的问题是：能否用定位的方法，让表单和图片适应不同分辨率，同步变化？ 回答：可以。对表单和图片的定位用相同的方法和相同的数值。但是img必须加上 z-index:-1; img { position: absolute; top: 22%; left: 33%; width: 11%; height: 10.5%;} z-index:-1; }

好像不行，z-index:-1;这个是加在img上还是input上呢？img上好像没用啊。

[kmokd]

[/quote]对，就是这个意思，您的意思是，我上面的代码没问题，只是再加一个z-index:-1;就可以了吗，这是什么原理呢？[/quote]
我的回答是依据你提供的代码已实现定位的基础上，在定位代码中，对.img加z-index:-1;、对.input加 z-index:0;。如果没有实现定位，则要检查的内容就要多了。

[kmokd]

引用 11 楼 kmokd 的回复:

对，就是这个意思，您的意思是，我上面的代码没问题，只是再加一个z-index:-1;就可以了吗，这是什么原理呢？[/quote]
我的回答是依据你提供的代码已实现定位的基础上，在定位代码中，对.img加z-index:-1;、对.input加 z-index:0;。如果没有实现定位，则要检查的内容就要多了。[/quote]

提示：比如表单的字体设置。font-family、font-size等都会影响表单在不同分辨率的显示，而图片就没有此类问题。

[九亿少女无法触及的梦ى]

建议你这种定位不要使用百分比，除非是需要居中，你可以使用百分比

[qingwadaxia_1]

引用 10 楼 天际的海浪 的回复:

.input_1 的top和height都用的是百分比。那么.pie2就必须明确设置固定的height值才行。 否则.input_1的top和height就不要用百分比。

请问如果.pie2没有设置固定的height值，.input_1的top和height定位要怎么定位呢

[天际的海浪]

引用 14 楼 qingwadaxia_1 的回复:

[quote=引用 10 楼 天际的海浪 的回复:] .input_1 的top和height都用的是百分比。那么.pie2就必须明确设置固定的height值才行。 否则.input_1的top和height就不要用百分比。

请问如果.pie2没有设置固定的height值，.input_1的top和height定位要怎么定位呢[/quote] 你的图片大小是固定的，.input_1 的属性当然都是用px的单位了

[kmokd]

楼主的问题是：“如上图有姓名和电话两个表单，他们是图片形式的，我要把input输入框定位在对应的姓名和电话的图片上，在不同分辨率下，自己定位写的input的表单高度有的会超出，这种情况下，怎么设置呢？”
回答：表单的字体设置，font-family、font-size等都会影响表单在不同分辨率的显示，而图片就没有此类问题。 举例如下：
设 图片高度27px,表单高度27px：其中文字高度20px,边距7px。当分辨率为原1/3时，
图片高度 1/3×27＝9px,
表单中，文字高度1/3×20＝6.66666……≈7px，边距高度 1/3×7＝2.33333……≈3px，则表单高度＝7＋3＝10px，
表单高度＞图片高度
所以 “在不同分辨率下，自己定位写的input的表单高度有的会超出”。
结论：如果把图片与表单分别设置两个盒，因为表单总是要有文字的，所以在不同分辨率下，自己定位写的input的表单高度有的会超出。
********
扩展问题：那么按楼主的思路，怎么设置就表单不会超出呢？那就要对文字的显示作牺牲。
回答：再设文字框(div)，高度20px，且overflow属性为直接隐藏。
当分辨率为原1/3时，文字框高度与边距高度是按比例同时缩小，文字框高度6px，边距高度3px，则表单高度＝6＋3＝9px；
而图片高度 1/3×27＝9px,
表单高度＝图片高度
但文字高7px，只能显示高 6px了。