CSS中的Position定位

        CSS中的Position用来规定对象定位类型的属性，Position中提供了几个定位机制，用来布局对象；任何类型的对象都可以用Position来定位；

        1.relative相对定位 : 　相对于原本的位置，此定位不会让对象脱离标准文档流，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。

        2.absolute 绝对定位:　①相对于浏览器(所在标签的所有父级标签都没有Position属性时) ，②相对于父级标签(相对于有Position属性的父级标签)； 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。

        3.static : 　粘性定位，无特殊定位(标准文档流)，对象遵循HTML定位规则。

        4.fixed : 　固定定位，生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 IE5.5及NS6尚不支持此属性。

以下是代码和效果图：

        一，relative相对定位 :

效果：

 

        二，absolute 绝对定位:

效果：

 三，static  粘性定位: 　

    
    
    



我是粘性定位代码块

效果：无特殊效果

 

        四，fixed : 　固定定位

    
    
    


我是固定代码块

    普通颜色块

效果1：页面移动前

效果2：页面上下移动后（蓝色块是fixed固定块）

 

Position定位中，层次堆叠问题:  用：z-index属性解决 数组越小 越在 最下面；

    
    
    


1

2

3

效果：