position属性分析：
relative---->相对定位
相对定位：相对于元素原来（不设position属性时，元素与其他页面元素在页面中依次排列时的位置）的位置进行移动，
元素原来的空间位置会保留下来。------->当前设置relative属性的元素与页面其他元素不在同一平面上。
如果top值是正值，元素的位置就向下移动，如果是负值，元素的位置就向上移动。
如果left值是正值，元素的位置就向右移动，如果是负值，元素的位置就向左移动。
absolute----->绝对定位
绝对定位：相对于离此元素最近的，并且有定位属性（有position属性，且值不是static）的 父级元素进行定位。而此元素原来的空间位置（不设position属性时，
元素与其他页面元素在页面中依次排列时的位置）不会保留。
绝对定位有四个值可以控制方向：top、right、bottom、left
在有固定大小的区域内，对元素进行定位，最好用绝对定位。
如果当前元素的所有父级元素都没有定位属性时，则元素就相对于当前浏览器进行绝对定位。
z-index属性（层级属性）：
-------->针对有position属性的元素设置的属性
元素层级值越大的，元素的位置越在上面。----->应用实例：许愿墙
<html页面代码>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<style type="text/css">
.circle {
width:500px;
height:300px;
position:relative;
border:3px solid #689e9f;
}
.circle .lt, .circle .rt, .circle .lb, .circle .rb {
position:absolute;
width:12px;
height:12px;
background:url(circle.png) no-repeat;
}
.circle .lt {
background-position:0 0;
left:-3px;
top:-3px;
}
.circle .rt {
background-position:-12px 0;
right:-3px;
top:-3px;
}
.circle .lb {
background-position:0 -12px;
left:-3px;
bottom:-3px;
}
.circle .rb {
background-position:-12px -12px;
right:-3px;
bottom:-3px;
}
</style>
<div class="circle">
<div class="lt"></div>
<div class="rt"></div>
<div class="lb"></div>
<div class="rb"></div>
</div>
4466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
