四种定位方式（position）
共有属性：css四个属性（top、left、right、bottom）
1、Relative相对定位
a) 定位的元素，可以通过left、right、top、bottom这四个属性设置新的位置
b) 元素移动后，原来的坑不变。表面上看起来移动了，实际上没有移动(元神出窍)
c) 作用：界面微调 配合绝对定位来用（子绝父相）
d) 是相对他自己原先的位置移动。该例中box2往下走了100px,往右走了100px。跟其他两个盒子（其他两个盒子只要设颜色宽高就行）没关系。
.box2{
background-color: green;
position: relative;
left: 100px;
top:100px;
}
2、Fixed：固定定位
a) 值当前元素以浏览器位置进行定位，不会以页面位置进行定位
b) 特点：设置fixed后，left、top、bottom、right有效
脱标
c) 主要应用：1、爬楼导航 2、顶部菜单冻结 3、右边的回顶部效果（就是一直固定在页面某一个位置不动，比如京东左侧爬楼导航）
.bar{
width: 50px;
height: 500px;
background-color: green;
position: fixed;
left: 100px;
top:100px;
}
3、absolute：绝对定位
a) 特点：left、top、bottom、right有效
脱标
b) 主要应用：不规则的元素定位上面
c) 注意：1）绝对定位的定位标准：去找有定位的父元素，如果没有找到有定位的父元素，则以<body>,也就是说贴紧浏览器。
2）如果所有父元素都没有定位，则会贴浏览器
d) 子绝父相：如果子元素是绝对定位，一般父元素需要设置为相对定位
子绝父绝、子绝父固
4、 static：默认定位方式
绝对定位和固定单位都脱标了，只有相对定位没有脱标
1177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
