CSS定位

一.static==啥也不写 静态

正常文档流

left,right,bottom,top偏移属性无效（相对于距离左边距）

z-index属性无效

注：因为浮动，多数情况下还真不需要给元素设置position属性

 

二.fixed 固定

相对于窗口定位，而不是相对body

 

三.relative 相对

1.设置了relative的元素跟其他元素一样，出现在文档流中它该出现的位置；设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动

2.注：使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。

3.注：偏移可不是边距，跟边距是不一样的。

4.下图有三个浮动的块，第二个块设置相对定位position:relative，此时它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中

5.给第二块加上偏移：position:relative; left:50px ; top:30px;

6.原来所占据的那个位置空间依然还在(虚线框标示的地方)

7.它的偏移也不会把别的块从文档流中原来的位置挤开

8.可以设置它的z-index属性来调整它的堆叠顺序

 

 

四.absolute 绝对

1.相对于设置了除static定位之外的定位（比如position:relative position:absolute position:fixed）的第一个祖先元素，直到真的没有才选body

2.绝对定位的元素相对于谁来定位，我们就把这个"谁"叫着参照物