定位position

布局方法：文档流、浮动、层布局（定位） 三种定位：相对定位、绝对定位、固定定位

1、相对定位

语法：position:relative; 特点：相对定位不脱离文档流，在文档中原本的位置依然为其保留 偏移参考位置： 元素本身在文档流内原本的位置

2、绝对定位

语法：position:absolute; 特点：绝对定位的元素会脱离文档流，在文档中原本的位置不保留 偏移参考位置(定位父级)： 离绝对定位元素最近的一个带有position属性的祖先元素，如果不存在这样的元素就是参考body定位

3、固定定位

语法：position:fixed; 特点：固定定位的元素会脱离文档流，在文档流中原本的位置不保留 偏移参考位置: 浏览器的可视区

定位偏移属性

• left:距离参考位置左边缘偏移，正数向右偏移，负数向左偏移

• right: 距离参考位置右边缘的偏移，正数向左偏移，负数向右偏移

• top:距离参考位置上边缘偏移，正数向下偏移，负数向上偏移

• bottom: 距离参考位置下边缘偏移，正数向上偏移，负数向下偏移

left和right通常使用一个，如果同时使用left生效 top和bottom通常使用一个，如果同时使用top生效

• 脱离文档流的元素不会自动占满一行，宽度默认是由内容撑开

CSS的相对定位和绝对定位
通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。
也就是说我们平时如果不给某元素一个position属性的声明，那么它默认的就是我上述的这种情况，不过因为有了浮动，所以通常情况下我们还真不需要给元素设置position属性！
但是某些特殊的情况下，我们不得不用到position属性，那我们今天就讲讲position属性的relative和absolute值
首先说relative ,相对定位。
怎么理解呢？如果说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。
我们先看看下图：

上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的，这时大家看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。
接下来我给那个设置了position:relative的块设置一个偏移：left:50px ; top:30px 这时我们再看看效果：

这时我们发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。
同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。
我们可以设置它的z-index属性来调整它的堆叠顺序。
接下来我们来看看绝对定位：position:absolute
被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该 元素浮起来，但它们的不同点在于，相对对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来，我们可以通过z-index来设置它们的堆叠顺序 。
那么绝对定位是如何定位的呢？首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）
绝对定位的元素相对于谁来定位，我们就把这个"谁"叫着参照物，我们结合上面的讲解来看看下图就明白了 ：

我们看一下在浏览器里的效果，我们先看看没有使用绝对定位时的样子：

 
然后我们给第二个块设置绝对定位：position:absolute 然后再设置一个偏移：left:150px;top:40px; 这时就变成了下图所示：

通常给父元素加一个相对定位，然后让子元素绝对定位，top值是子元素顶端距离父元素顶端的距离，left值是子元素左端距离父元素左端的距离，用来调整子元素相对于父元素的位置。