logo标签列表

CSS相对于图像的定位

cssimage
4

我正在尝试将一段文本电子邮件和相应的文本框对齐到一张图片的特定位置。我希望这个位置是固定的，无论屏幕大小如何。以下是我的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>

我无法使其相对于图像对齐。在更大的屏幕上或缩放时，文本和文本框会错位。请给予建议。

如果您可以正确格式化HTML，我就可以解决这个问题。 - kobe
我做不到那个...这就是为什么我删除了每行中的<。 - Scorpion King
只需使用4个空格缩进代码（或选择代码并单击1010按钮）。 - some
请将以下关于编程的内容从英语翻译成中文。仅返回翻译后的文本：将其突出显示并按ctrl-k。这将在文本前添加4个空格，以使文本呈现为代码。 - JAL
谢谢。现在代码缩进整齐了。 - Scorpion King
2个回答
3

看一下我的示例代码。这是有效的。改变父级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>
嘿，政府，当你放大和缩小时...你能看到文本位置错乱吗？我发现使用你提供的代码会出现这种情况。我希望它相对于我正在使用的image1.jpg。这似乎是相对于整个网页的。 - Scorpion King
你给一个div设置了高度1000px；带有背景url，并且在这个div中，你有所有的文本框等。现在，你想要从哪个图像中保持恒定的距离。由于它是背景图片，所以div将具有该背景。 - kobe
@scorpion，你的设计方式有问题。你把图片作为背景放在了图片上，这是问题所在。创建一个 div 并将图片放在其中 <img src= />。 - kobe
蓝色只是背景颜色...橙色才是图片，我希望文本的位置基于该图片而不是基于Web浏览器或蓝色背景。我希望您能更好地理解我想要实现的目标，并感谢您努力帮助。 - Scorpion King
啊...如果我把所有的文本和文本框都改成div，它们就会相对于蓝色背景移动。 - Scorpion King
显示剩余5条评论
1
如果您希望它们始终位于文本框的顶部，请将父控件设置为相对定位。要保持恒定距离的框或任何其他内容，请将其设置为绝对定位。
 .Container {
position:relative

}

.child{
position:absolute
bottom:0px; // how much u wants to maintain..from the element
}
我确实尝试过这个...但忘记更新代码，结果并没有起作用。它仍然以同样的方式显示。 - Scorpion King
请您发布完整的HTML代码，并在更新时添加四个空格，这样它就可以正确格式化。这很简单。如果您能够更新HTML，我们就可以轻松解决问题。 - kobe
这是我的完整代码。我正在本地机器上尝试它，但无法使其绝对定位。 - Scorpion King
你应该从父元素提供需要保持多少距离。 - kobe
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接