CSS定位属性

      

       定位属性                                               

              position属性

1. 1.      static：没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级
2. 2.      relative：不脱离文档流，参考自身静态位置，通过top，bottom，left，right定位，可以通过z-index进行层次分级
3. 3.      absolute：脱离文档流，参考自身静态位置，通过top，bottom，left，right定位，可以通过z-index进行层次分级
4. 4.      fixed：固定定位，这里他所固定的对象是可视窗口而并非是父级元素，可以通过z-index进行层次分级

 

文档流：指的是元素按照其在HTML中的位置顺序决定排布的过程主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。

文档流=行级元素+行内元素正常排列构成的页面

             

z-index层叠分级

1. 1.      auto：遵从其父对象的定位
2. 2.      number：无单位的整数值，可以为负数。z-index使用证书表示元素的前后位置，数值越大，就会显示在相对靠前的位置

注： z-index只能出现在出现在定位属性出现之后；当position的值不为static值时

 

关于position定位的7种情况：

1） 当父元素为static时，当子元素为absolute时，子元素脱离文档流，参考body原点进行定位

2） 当父元素为static时，当子元素为relative时，子元素不会脱离文档流，参考自身位置进行定位

3） 当父元素为relative时，当子元素为absolute时，子元素脱离文档流，参考父级元素进行定位

4） 当父元素为relative时，当子元素为relative时，子元素不会脱离文档流，参考自身位置进行定位

5） 当父元素为absolute时，当子元素为absolute时，子元素脱离文档流，参考父级元素进行定位

6） 当父元素为absolute时，当子元素为relative时，子元素不会脱离文档流，参考自身进行定位

7） 当子元素为fixed时，脱离文档流，参考body原点进行定位