html多个绝对定位,HTML5 绝对定位的问题

HTML5 布局之路 - 表单实例

.wrap {

width:300px;

height:100px;

padding:12px;

border:1px solid #933;

}

.user, .pass {

position:relative;

height:46px;

padding-left:48px;

border:1px solid #d9d9d9;

border-radius:3px;

}

.user {

margin-bottom:8px;

background:url('../images/user.png') 0 0 no-repeat;

}

.pass {

background:url('../images/pass.png') 0 0 no-repeat;

}

.wrap label, .wrap input {

position:absolute;

top:0;

left:48px;

}

.wrap label {

z-index:1;

width:250px;

height:100%;

line-height:46px;

color:#666;

cursor:text; /*文字光标*/

}

.wrap input {

width:250px;

height:100%;

border:none;

background:transparent;

line-height:46px;

outline:none; /*去掉高亮部分*/

}

请输入用户名

请输入密码

背景图片大小为48*48

三个问题。

form宽度设置为300px 子级div默认沾满form的宽度，且有1px的边框宽度但是这里子级div宽度是跟form持平为300px而不是302px，为什么没有溢出？

绝对定位的问题，这里子级div有48px的左内边距，说明div的内容区域并没有300px，为什么绝对定位会从最左边的边框处开始定位，而不是从内容区域开始定位？

background:url('../images/pass.png') 0 0 no-repeat;这里的图片定位 水平0 垂直0要如何看，麻烦讲解下？