position:absolute和relative

position的基本语法：

position：static | relative | absolute | fixed

取值：

static :　 默认值。无特殊定位，对象遵循HTML定位规则

absolute :　 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义

fixed :　 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

relative :　 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

我所理解的绝对定位和相对定位：

相对定位，relativa，就是相对于自己原本应该的位置。绝对定位，absolute，就是相对于自己的父元素，如果父元素有定位的话，如果父元素没有定位，就相对于BODY的左上角为原始点。

今天新认识了absolute，absolute可以层叠，通过z-index属性，可以控制哪个在上方。



背景小娃娃和按钮【点我上传】是两张不同的图片

<div id="image">
<div id="image-content"></div>
<div id="upload-button"></div>
</div>

css代码：

#image{
width:500px;
height:300px;
position:relative;
top:0px;
left:0px;
}
#image-content{
width:500px;
height:300px;
background:url(../images/baby.png) no-repeat;
position:absolute;
top:0px;
left:0px;
}
#upload-button{
width:100px;
height:100px;
background:url(../images/button.png) no-repeat;
position:absolute;
top:80px;
left:120px;
z-index:100;
}

如果不给#upload-button加z-index属性，则，娃娃的图片会把按钮图片给盖住。z-index值越大，越在上面。

另外，今天看了张鑫旭的博客，学习了一些关于定位的知识，想深入了解的请戳：css-相对绝对relativeabsolute定位系列