页面布局须知重点记，元素的布局定位模式 position 属性

定位 (position)

为什么要使用定位？

可以是实现某元素显示在其他元素上面，可以固定盒子在屏幕的某个位置
三种布局的机制的上下顺序：
标准流在最底层----浮动的盒子在中间层-----定位的盒子在最上层

定位也是布局的一种方式，有两部分组成：定位=定位模式+边偏移
我们定位的盒子是通过偏移来移动位置的
在css中，通过top、bottom、left、right元素定义元素的边偏移：(方位名词)

定位模式(position)

通过 position 属性定义定位模式，语法：
选择器{position：属性值;}
属性值：static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

1.静态定位（static）
静态定位是元素的默认定位方式，无定位意思。相等于none，
静态定位按照标准流特性摆放，

2.相对定位（relative）
相对定位是元素相对于它原来在标准流中的位置来说的
特点：
相对于自己原来在标准流中的位置来移动
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待他

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

4.固定定位（fixed）
固定定位是绝对定位的一种特殊形式，若绝对定位是一个矩形，那固定定位就是正方形
特点：不原有占位置–完全脱标。 只认浏览器的可是可视窗口-----浏览器窗口+边偏移属性来设置元素位置，跟父元素没有任何关系，单独使用，不随滚动条滚动。

补充：

堆叠顺序（z-index）
在使用定位布局时，会出现盒子重叠的情况。默认后来者居上，后面的盖住前面的
可以用z-index设置，层叠等级属性可以调整盒子堆叠顺序。
特性：
属性值：正整数、负整数或0，默认0，数据值越大盒子越考上
属性值相同按照后来居上规则
数值后面不加单位
z-index只能应用于相对定位、绝对定位、和固定定位的元素，其他无效。

定位改变display属性
绝对定位和固定定位也和浮动类似， 默认转换的特性 转换为行内块。一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

总结