相对于图片的CSS位置

我正在尝试在特定位置的图像顶部对齐文本电子邮件和文本框.无论屏幕大小如何,我都希望位置固定.这是我的HTML代码：

<html>
<head>
<style type="text/css">
#container {
  background-color:blue;
}
#content {
  background: url('images/orange.jpg')  no-repeat center top;
}
#c_main {
  color: yellow;
}
#c_email {
  position:absolute;
  top:200px;
  left:410px;
  color: #FFFFFF;
  font-size: 15px;
}
#c_emailBox1 {
  position:absolute;
  top:200px;
  left:480px;
}
#c_emailBox2 {
  position:absolute;
  top:200px;
  left:620px;
  color: white;
  font-size: 12px;
}
input {
  border:0;
}
.email_textBox1 {
  width:130px;
  background-image:url('images/text_bg.jpg');
  background-repeat:no-repeat;
}
.email_textBox2 {
  color: #FFFFFF;
  font-size: 11px;
  width:130px;
  background-image:url('images/text_bg.jpg');
  background-repeat:no-repeat;
}
</style>
</head>
<body>
  <div id="container">
    <div id="content" style="height:1000px;left:0px;border:1px solid red;position:relative" >
      <div style="height:100px;width:200px;border:1px solid red;position:absolute;top:250px;left:0px">
        <h4> CREATE A USERNAME AND PASSWORD </h4>
      </div>
    <div id="c_email">
      Email
    </div>
    <div id="c_emailBox1">
      <input type="textBox" id="email1" border="0" class="email_textBox1">
    </div>
    <div id="c_emailBox2">
      <input type="text" id ="email" value="Confirm Email Address" class="email_textBox2" onfocus="if
(this.value==this.defaultValue) this.value='';">
    </div>
  </div>
</div>
</body>
</html>

我无法使其相对于图像对齐.当在较大的屏幕中查看或放大和缩小时,文本和文本框将放错位置.请提出建议.

最佳答案

请参阅我的示例代码.可以了更改父级div的高度,子级始终停留在底部：

<div style="height:300px;border:1px solid red;position:relative"> 

   <div style="height:100px;width:20px;border:1px solid red;position:absolute;bottom:0px">
   </div>

</div>

相对于图片的CSS位置

相关文章