详解CSS的相对定位和绝对定位

淡淡的烟草味﹌ 2022-06-15 04:07 234阅读 0赞

# 详解CSS的相对定位和绝对定位 #

CSS的相对定位和绝对定位  
通常情况下，我们元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的，不会生效，比如你设置一个距离左边距偏移100px的声明：left:100px 那么这条声明不会起到任何效果。还有z-index属性在这时也不会生效。  
也就是说我们平时如果不给某元素一个position属性的声明，那么它默认的就是我上述的这种情况，不过因为有了浮动，所以通常情况下我们还真不需要给元素设置position属性！  
但是某些特殊的情况下，我们不得不用到position属性，那我们今天就讲讲position属性的relative和absolute值  
首先说relative ,相对定位。  
怎么理解呢？如果说我对某元素设置了相对定位，那么首先这个元素他会跟其它的元素一样，出现在文档流中它该出现的位置，然后，我们可以设置它的水平或垂直偏移量，让这个元素相对于它在文档流中的位置的起始点进行移动。有一点要注意， 在使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间。这里值得注意的一点是：偏移可不是边距，跟边距是不一样的。  
我们先看看下图：  
![详解CSS的相对定位和绝对定位 三联][CSS_]  
上图中有三个浮动的块，第二个块是设置了相对定位position:relative了的，这时大家看到它的位置并没有其它什么不同，跟其它两个块一样都处在正常的文档流中。  
接下来我给那个设置了position:relative的块设置一个偏移：left:50px ; top:30px 这时我们再看看效果：  
![ce00c86d7a2a252e3c9174799e28a5f4.png][]  
这时我们发现第二个块针对它本身位置的起始点进行了一个偏移，但是它原来所占据的那个位置空间依然还在(虚线框标示的地方)，即使我们把偏移量设置得再大一点，使它完全离开原来的位置，它原来位于文档流中的位置仍然会存在，不会被第三个块浮动过来填补掉。  
同时，它的偏移也不会把别的块从文档流中原来的位置挤开，如果有重叠的地方它会重叠在其它文档流元素之上，而不是把它们挤开，就像图中那样，它已经覆盖在了第三个块之上。  
我们可以设置它的z-index属性来调整它的堆叠顺序。  
接下来我们来看看绝对定位：position:absolute  
被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除，那这个元素到哪去了呢？它浮了起来，其实设置了相对定位relative时也会让该 元素浮起来，但它们的不同点在于，相对对定位不会删除它本身在文档流中占据的那块空间，而绝对定位则会删除掉该元素在文档流中的位置，完全从文档流中抽了出来，我们可以通过z-index来设置它们的堆叠顺序 。  
那么绝对定位是如何定位的呢？首先，如果它的父元素设置了除static之外的定位，比如position:relative,或者position:absolute以及position:fixed，那么它就会相对于它的父元素来定位，位置通过left , top ,right ,bottom属性来规定，如果它的父元素没有设置定位，那么就得看它父元素的父元素是否有设置定位 ，如果还是没有就继续向更高层的祖先元素类推，总之它的定位就是相对于设置了除static定位之外的定位（比如position:relative）的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位（并非窗口,相对于窗口定位的是fixed）  
绝对定位的元素相对于谁来定位，我们就把这个"谁"叫着参照物，我们结合上面的讲解来看看下图就明白了 ：  
![b0172d4ed31317495241e626c594ff1f.png][]  
我们看一下在浏览器里的效果，我们先看看没有使用绝对定位时的样子：

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

还有一点就是：在设置偏移量的时候，我们可以设置负值。  
好了，既然理解了相对定位和绝对定位，那我们应该怎么把它们运用到实际案例中呢？  
首先我们来看看下图：  
![63fc399a192c766678643eb323942c06.png][]  
在上图中的去购物车结算按钮左上方有一个红色的小块，用来显示购物车中有几件商品，大家在没学会绝对定位之前可能不知道这个红色的小块要怎么实现，但是现在刚刚学了绝对定位，这个问题就不再是问题了。  
我还是亲自来做一下吧，我们先把这个背景图片弄出来：  
![4823daf5671e24d3304c385e3929f9eb.png][]  
然后我们写HTML:  
<div class="cart\_btn">  
   
    <span><i>155</i></span>  
    <a href="dd.html" target="\_blank">去购物车结算</a>  
    <b></b>  
   
</div>  
上面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三角形之外，其它的如果都还不会，那你肯定没有好好看前面的文章。再说你实在不懂的话也可以去查一查参考手册  
最后我们来看看浏览器里的效果：  
  
  
![ee99796890d110f8ed0620c927085acd.png][]

[CSS_]: http://img14.3lian.com/201501/31/5a04f896898baa68291a1920bec36375.png
[ce00c86d7a2a252e3c9174799e28a5f4.png]: http://img14.3lian.com/201501/31/ce00c86d7a2a252e3c9174799e28a5f4.png
[b0172d4ed31317495241e626c594ff1f.png]: http://img14.3lian.com/201501/31/b0172d4ed31317495241e626c594ff1f.png
[b020501432574086feb75d31633f91d4.png]: http://img14.3lian.com/201501/31/b020501432574086feb75d31633f91d4.png
[a9d6a6e2a097b579e454383f02b7d743.png]: http://img14.3lian.com/201501/31/a9d6a6e2a097b579e454383f02b7d743.png
[63fc399a192c766678643eb323942c06.png]: http://img14.3lian.com/201501/31/63fc399a192c766678643eb323942c06.png
[4823daf5671e24d3304c385e3929f9eb.png]: http://img14.3lian.com/201501/31/4823daf5671e24d3304c385e3929f9eb.png
[ee99796890d110f8ed0620c927085acd.png]: http://img14.3lian.com/201501/31/ee99796890d110f8ed0620c927085acd.png