相对于图像的css位置

我正尝试在特定位置的图像顶部对齐文本电子邮件和文本框。无论屏幕大小如何，我都希望这个位置是固定的。这里是我的html代码：相对于图像的css位置

<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>

我不能让它相对于图像对齐。在更大的屏幕中看到或放大和缩小时，文本和文本框错位。建议。

来源

2010-10-26 Scorpion King

如果你可以正确格式化html，我可以解决这个问题。 – kobe 2010-10-26 02:32:08

我不能这么做......这就是为什么我删除了每一行中的<。 – 2010-10-26 02:33:01

只需用4个空格缩进代码（或选择代码并单击1010按钮） – some 2010-10-26 02:34:03

见我的示例代码。这是行得通的。改变父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>

来源

2010-10-26 02:40:25 kobe

嘿gov，当你放大和缩小...你能看到文本不正确的地方。我确实看到发生在你提供的代码上。我想它是相对于我使用的image1.jpg ...这似乎是相对于完整的网页。 – 2010-10-26 02:47:11

你有你的代码工作副本吗？ – kobe 2010-10-26 02:49:44

你的意思是一个活的链接？如果是的话我现在没有。 – 2010-10-26 02:50:21

如果您希望它们始终位于文本框的顶部。使父控制为相对。箱或要保持恒定的距离，什么使它绝对位置

.Container { 
position:relative 

} 

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

来源

2010-10-26 02:31:42 kobe

我的确尝试过......忘了更新代码，但它没有奏效。它仍然显示相同的方式 – 2010-10-26 02:33:23

可以请你发布你的完整的html，并在更新时添加四个空格，它将格式正确。它应该很简单。如果你可以更新html，我们可以easliy修复这个问题 – kobe 2010-10-26 02:35:46

这是我的完整的代码。我在本地机器上尝试它，但没有得到它绝对的位置。 – 2010-10-26 02:38:10

相对于图像的css位置

回答

相关问题