CSS定位

定位

CSS布局的三种机制

CSS提供了3种机制来设置盒子的摆放位置：普通流、浮动和定位。
1.普通流（标准流）
2.浮动
让盒子从普通流中浮起来——让多个盒子（div）水平排列成一行。
3.定位
将盒子定在某一位值 自由的漂浮在其他盒子的上面。

定位模式

定位 = 定位模式 + 边偏移
选择器{ position：属性值；}

静态定位（static）

静态定位是元素的默认定位方式，无定位的意思 按照标准流特性摆放位置，它没有边偏移。

相对定位（relative）

特点：
相对于自己原来在标准流中位置来移动
原来在标准流的区域继续占有

绝对定位（absolute）

绝对定位是以元素以带有定位的父级元素来移动位置
1.完全脱标——完全不占位置
2.父元素没有定位，则以浏览器为准定位

3.父元素要有定位
将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位。
绝对定位特点：
绝对是 以带有定位的父级元素来移动位置如果父级都没有定位，则以浏览器文档为准移动位置。
不保留原来的位置，完全是脱标的。

堆叠顺序（z-index）

加了定位的盒子默认后来者居上
应用z-index层叠等级属性可以调整盒子的堆叠顺序。
z-index特性：
1.属性值：正整数、负整数或0，默认值是0，数值越大，盒子越靠上。
2.如果属性值相同，则按照书写顺序，后来居上；
3.数字后面不能加单位。

定位小结

注意
1.边偏移需要和定位模式联合使用，单独使用无效；
2.top和bottom不要同时使用
3.left和right不要同时使用