（续）position: relative | absolute

假设我定义一个横向登陆框，其样式定义为{width:548px; height:20px; position:relative; color:#fff;}，并将其设做为一个参照体，随后在登陆框中假如其他文本，textfile，button其样式定义分别为：
    用户名 {position:absolute; left:15px; top:4px;}
    用户名输入框 {height:20px; position:absolute; left:60px; top:0;}
    密码{position:absolute; left:155px; top:4px;}
    密码输入框{height:20px; position:absolute; left:190px; top:0;}
    登陆按钮 {width:50px; height:23px; position:absolute; left:290px; top:-1px;}
    注册按钮 {width:50px; height:23px; position:absolute; left:350px; top:-1px;}
    其他文本 {position:absolute; right:15px; top:4px;}

他们分别列出了自身的属性以及参照点相对于他们各个的位置，如参照体是在‘用户名’的左15px,上4px;；参照体是在‘其他文本’的右15px;上4px；

完整代码如下：

css 代码

 

1. .loginbox {width:548px; height:20px; position:relative; color:#fff;}   
2. .loginname {position:absolute; left:15px; top:4px;}   
3. .loginnamein {height:20px; position:absolute; left:60px; top:0;}   
4. .loginpass {position:absolute; left:155px; top:4px;}   
5. .loginpassin {height:20px; position:absolute; left:190px; top:0;}   
6. .loginlogbtn {width:50px; height:23px; position:absolute; left:290px; top:-1px;}   
7. .loginregbtn {width:50px; height:23px; position:absolute; left:350px; top:-1px;}   
8. .logintext {position:absolute; rightright:15px; top:4px;}