CSS相对定位和绝对定位

1.相对定位
相对定位实际上被看做普通流定位模型的一部分，因为元素的位置相对于他在普通流中的位置。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。

  .left                                                     
{
    width:200px;
    height:200px;
    background:green;
}
.right
{
    width:200px;
    height:200px;
    background:red;
}
  <div class="left"></div>
  <div class="right"></div>

显示如图1 IE8

将.left改为：

.left
{
    width:200px;
    height:200px;
    background:green;
    position:relative;
    top:20px;
    left:20px;
}   

如图2

由此可见，元素定位为relative，是相对于他在普通流中的位置偏移。相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素会导致它覆盖其他框。
但是如果在样式中加float属性的话，在定位relative，则定位时相对于其脱离了文档流即浮动的位置来进行定位的。

2.绝对定位
绝对定位是元素的位置与文档流无关，因此不占据空间（我认为不占据空间的含义是绝对定位偏移空出来的空间，其他元素块会占用），普通文档流中其他元素的布局就像绝对定位的元素不存在时一样。

.box1
{
    float:left;
    width:200px;
    height:200px;
    background:green;
}
.box2
{
    float:left;
    width:200px;
    height:200px;
    background:red;
}
.box3
{
    float:left;
    width:200px;
    height:200px;
    background:gray;
}

如图3

然后在.box2增加{position:absolute;top:50px;left:50px;} 如图4

可见absolute不占据空间，本来box3在box2旁边，现在box2采用absolute则会脱离文档流，现在box3会挨着box1来排列。所以说是不占据空间的。

绝对定位的元素的位置相对于最近的已定位祖先元素。如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。而这里box2就是相对于body定位的。
对于定位的主要问题是要记住每种定位的意义，相对定位是“相对于”元素在文档流中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么是最初的包含块。因为绝对定位的框与文档流无关，所以他们可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆放次序，z-index值越高，框在堆中的位置就越高，也就是值越大离屏幕越近。‘
现在让两个块分别居于一个快的左上角和右下角。但是我们首先写一段样式：

body 
{
    margin:0px;
    padding:0px;
    background:yellow;
}

#container
{
    margin-left:auto;  /*为了居中*/
    margin-right:auto;  /*为了居中*/
    /*position:relative;*/
    width:960px;
    height:800px;
    background:green;
}

#left
{
    float:left;
    width:200px;
    height:200px;
    background:red;
}

#right
{
    position:absolute;
    right:0px;
    bottom:0px;
    width:200px;
    height:200px;
    background:red;
}
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

则效果如图五所示

这里right的直接父容器应该为container,但是这里container并没有设置相对定位，所以如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，这里就是body，设置body的颜色为黄色，可以看出right是相对于body来定位的，但是取消container的注释符之后，则图6所示

在进行页面布局时，绝对定位是非常有用的工具，尤其是在使用相对定位的祖先元素的情况下，完全可能只使用绝对定位创建出整个设计。但是注意-------在Windows上的IE5.5和IE6中有一个bug，如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸，如果IE会相对于画布定位这个框。

总结

以上是生活随笔为你收集整理的CSS相对定位和绝对定位的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。