Question

我正在尝试在特定位置的图像顶部对齐文本电子邮件和文本框。无论屏幕的大小如何，我都希望这个位置能够得到修复。这是我的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>

我无法让它相对于图像对齐。在较大的屏幕中看到或放大和缩小时，文本和文本框放错了位置。建议请。

Answer 1

请参阅我的示例代码。这很有效。更改父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>

Answer 2

如果您希望它们始终位于文本框的顶部。将父控件设为相对控件。盒子或任何你想保持恒定距离的东西使它成为绝对位置

 .Container {
position:relative

}

.child{
position:absolute
bottom:0px; // how much u wants to maintain..from the element
}

css相对于图像的位置

2 个答案: