CSS布局与定位——Positioning(定位)四种定位方式要点总结

CSS定位方式为网页布局要点，而Positioning(定位)四种属性为掌握布局的基础。

1、Static 定位  （即静态定位）

要点：

html元素默认定位方式；

在正常的文档流中，占据空间；

top/bottom/right/left属性对其无效；

z-index层叠属性对其无效；

absolute定位元素不受其影响；

2、Relative 定位 （即相对定位）

要点：

相对其默认（static）位置定位；
在正常的文档流中，占据空间，位置改变后原本所占空间不变；
top/bottom/right/left属性有效；
z-index层叠属性对其有效；
absolute定位元素受其影响；
常用于absolute定位元素的容器；

3、Absolute 定位 （即绝对定位）

要点：

相对其已定位（ralative/absolute/fixed）父元素进行定位；
若无已定位父元素，则以body元素为父元素定位；
不在正常的文档流中，不影响正常流中元素位置；
top/bottom/right/left属性有效；
z-index层叠属性对其有效；
absolute定位元素受其影响；
top/bottom/right/left计算的定位起点默认为父元素盒模型外边界，按从左向右，从上往下次序排列。

4、Fixed 定位（即固定定位）

要点：

相对显示器窗口进行定位，窗口滚动也不影响其位置；
不在正常的文档流中，不影响正常流中元素位置；
top/bottom/right/left属性有效；
z-index层叠属性对其有效；
absolute定位元素受其影响；