1.相对定位relative(占位置)
仍处于标准文档流中
相对于原来位置进行偏移
相对定位的性质:不脱标、老家留坑、形影分离(影子出去了,但本质不动)
用途:一般用于微调元素、绝对定位的参考
2.绝对定位absolute(不占位置)
相对于浏览器窗口进行定位;当拖拽页面滚动条时,该元素随其一起滚动;
1.完全脱离标准文档流
2.不会对它的兄弟造成影响
3.当一个元素设置绝对定位,没有宽度时,元素的宽度会根据内容进行自动调节
4.如果父级没有定位,儿子绝对定位就以<html>
定位,即屏幕左上角为基准进行移动定位
5.如果父级有定位,就找最近的父级进行定位
所以一般是“子绝父相”。即父亲相对定位,儿子绝对定位。儿子相对于父级元素进行定位。用于CSS精灵图定位、小图标定位。
绝对定位的性质:脱标(所有的标准文档流在绝对定位后就都不遵守了,就不区分所谓的行内元素块元素,不需要display:block;就可以直接设置宽高了)
用途:用于“压盖”(一个东西压在另一个东西上面)、用于轮播图两侧的三角形
绝对定位的盒子居中例如:
width: 600px;
height: 60px;
position: absolute;
left: 50%;/*盒子左边框会贴着屏幕的中心线*/
margin-left: -300px;/*总宽度的一半(注意是否有padding)*/
3.固定定位position: fixed;:(占位置)
相对于浏览器窗口进行定位;当拖拽页面滚动条时,该元素不会滚动;
比如返回顶部图标在右下角固定住,不会随浏览器变化而改变位置。(IE6不兼容固定定位)
性质:脱离标准文档流
用途:返回顶部、顶部通栏、弹出框