标签：
<!DOCTYPE html>
CSS5-定位
元素定位
作用：1：元素重叠，2：元素的精确移动或定位
position
static 默认，普通流，不能移动，不能使用zindex和top、right等偏移属性
relative:相对定位，脱离普通流，有占位。
absolute:绝对定位，脱离普通流，无占位。
fixed:固定定位，脱离普通流，以浏览器窗口定位（ie6不支持）
.test{position:relative;}
static：不定位
relative：相对定位，默认位置不变，有占位后面元素也不变，相对于原来位置的左上角移位
absolute：绝对定位，默认位置不变，无占位后面元素顶上，
移位原点：本元素的父级元素的左上角，前提是父级元素也有定位属性，否则就找父级的父级，一直找到 html 标签
fixed：固定定位，默认位置不变，无占位，移位原点是浏览器左上角
fixed ie6不支持
定位偏移属性：
Y轴：
top 元素顶部偏移量
bottom 元素底边偏移量
X轴：
right 元素右边偏移量
left 元素左边偏移量
Z轴：
z-index 元素层叠顺序，值越大越靠上，默认为0
.test{position:absolute; top:auto; left:10px; z-index:100;}
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
<style>
.zong{width:650px;background:#ccc;}
.zong .a1{width:200px;height:50px;background:#f00;}
.zong .a2{width:150px;height:100px;background:#0f0;}
.zong .a3{width:100px;height:150px;background:#00f;}
.zong .a4{width:50px;height:200px;background:#ff0;}
/*定位*/
.zong{position:relative;}
.a2{position:absolute;left:100px;top:auto; right:auto;z-index:1000;}
.a3{position:absolute;right:50px;bottom:50px;z-index:2;}
</style>
<div class="zong">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
标签：
原文地址：http://www.cnblogs.com/lyp123/p/5662938.html
