css中的绝对定位和相对定位（详解，总结）

css中的绝对定位和相对定位（详解，总结）

总结：

设置绝对定位或者相对定位后都从文档中浮起来了，区别是相对定位还占着原来的位置，绝对定位不占着原来的位置，可以种z-index来改变元素的浮动的堆叠次序。

详讲：

浏览器默认状态下position的属性默认值是static也就是没有定位，元素出现在正常的文档流中，这个时候给元素设置的left，right、bottom、top这些偏移属性是没有效果的，不会生效；

eg：比如你设置一个距左边偏移100px的声明：left：100px ；那么这条声明不会起到任何的效果；此外还有z-index属性在这时也是不会生效。也就是说我们平时如果不给某一个元素position属性的声明，那么他默认的就是我上述的这种情况，不过因为有了浮动，通常情况下我们不需要给元素设置position属性！

***但是某些特殊的情况下，我们不得不用position属性，下面详解relative和absolute的值；

（1）relative 相对定位

如果我对某元素设置了相对定位，那么首先这个元素它会和其他的元素一样，出现在文档流中他该出现的位置，然后我们可以设置他的水平或垂直的偏移量，让这个元素相对他在文档中的位置的起始点进行移动。

****注意：在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没有偏移前的空间。如下图：

我们先看看下图：

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

这时我们发现第二块针对它本身位置的起点进行了一个偏移，但是它原来所占据的位置依然还在（虚线线框标示的地方），即使我们把偏移量设置的再大一些，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。
同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。

我们可以设置它的的z-index属性来调整它的堆叠顺序。

（2）绝对定位：position：absolute

被设置了绝对定位的元素，在文档流中是不占据空间的，如果元素设置了绝对定位，那么他在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来其实设置了相对定位定位的relative时也会让该元素浮起来，但是他们的不同点在于，相对定位不会删除他本省在文档流中占据的那块空间，而绝对定位会删除该元素在文档流中的位置，完全从文档流中抽出，我们可以使z-index来设置他们的堆叠顺序。

***绝对定位是如何定位的呢？1、如果它的父元素设置了除static之外的定位，比如：position：relative；position：absulote；position：fixed；，那么他就会相对它的父元素来定位，位置通过left，top，right，bottom属性来规定，如果他的父元素没有设置定位，那么就得看它的元素的父元素是否有设置定位，如果还是没有就继续想更高的祖先元素类推，总是它的定位就是相对与设置了除atatic定位之外的定位（eg：position：absulote；等）的第一个祖元素，如果所有的祖元素都没有以上三种定位中的一种定位，那么他就相对于文档body来定位（并非窗口，相对于窗口定位的是fixed）

绝对定位的元素相对与谁来定位，我们就把这个“谁”叫做参照物，如下图：

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

 

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

还有一点就是：在设置偏移量的时候，我们可以设置负值。

eg：首先我们来看看下图：

在上图中的去购物车结算按钮左上方有一个红色的小块，用来显示购物车中有几件商品，大家在没学会绝对定位之前可能不知道这个红色的小块要怎么实现，但是现在刚刚学了绝对定位，这个问题就不再是问题了。
我还是亲自来做一下吧，我们先把这个背景图片弄出来：

然后我们写HTML:

<div class="cart_btn">

<span><i>155</i></span>

<a href="dd.html" target="_blank>去购物车结算</a>

<b></b>

上面HTML代码中的 span元素就是那个用来显示购物车中商品数量的小红块，a元素中是文字描述，b元素是最右边的小三角。
我们来看一下CSS代码：
.cart_btn{width:120px;height:30px;background:url(../images/picA.png) no-repeat -17px 7px#f7f7f7;border:1px solid #eee;padding-left:30px;position:relative;_padding-top:5px;_height:25px;}
.cart_btn span{background:url(../images/picA.png) no-repeat -36px -54px;padding-left:7px;position:absolute; top:-12px;left:20px;}
.cart_btn span i{float:left;height:20px;background:url(../images/picA.png) no-repeat right-25px;padding-right:5px;font-style:normal;color:#fff;font-size:14px;}
.cart_btn a{color:#aaa;text-decoration:none;font-size:14px;padding-left:15px;line-height:30px;}
.cart_btn b{display:inline-block;border-color:transparent transparent transparent #CCCCCC;border-style:dashed dashed dashed solid;border-width:5px;height: 0;overflow: hidden;width: 0;}
上面CSS代码中我们把购物车图标作为.cart_btn的背景，这里我们发现一个问题，就是那一张图片上有三个图标，大家也发现了，我三个用到图标的元素都是用这一张图片做背景，但是显示的却不一样，这里就用到了我们前面讲过的背景定位问题，不会的朋友可认去看看前面的第十一讲：css背景属性background详细讲解-使用背景图片
CSS中的内容是什么意思这里就不讲了，要讲的话就跑题了，这些都是基本的东西，除了那个CSS三角形之外，其它的如果都还不会，那你肯定没有好好看前面的文章。再说你实在不懂的话也可以去查一查参考手册
最后我们来看看浏览器里的效果：

</div>