CSS：绝对定位和相对定位

CSS中position值的定义

先看CSS权威指南3中的定义，当然定义看起来比较涩会难懂，所以后面例子会用说人话的方式来解释，先看定义。

Position
值：	static \| relative \| absolute \| fixed \| inherit
初始值：	static
应用于：	所有元素
继承性：	无
计算值：	根据指定确定

Position值的含义：

static：

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中。

relative：

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：

元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者初始包含块。元素原先在正常文档流所占的控件会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：

元素的表现类似于将position设置为absolute，不过其包含块是视窗本身。

包含块：

根元素的包含块（也称初始包含块）由用户代理建立。在HTML中，根元素就是html元素，不过有些浏览器会用body作为根元素，大多数浏览器中，初始包含块是一个视窗大小的矩形。
对于一个非根元素，如果position值是relative或static，包含块则由最近的块级框，表单元格或行内块祖先框的内容边界构成。
对于一个非根元素，如果其position是absolute，包含块为最近的position值不是static的祖先元素，过程如下:

如果祖先是块级元素，包含块就是该元素的内边距边界，又边框界定的区域。
如果祖先是行内元素，包含块设置为祖先元素的内容边界，从左向右语言中，包含块上边距和左边界是该祖先元素第一个框内容区的上边界和左边界，包含块的下边界和右边界是最后一个框内容区的下边界和右边界。在从右向左读的语言中，包含块的右边界对应第一个框的右内容边界，包含块的左边界则取自最后一个框的左内容边界。上下边界也一样。
如果没有祖先，元素的包含块定义为初始包含块。

具体场景：

以7个div为例，div1~div7依次为红(s)，蓝(a)，紫(a)，黄(r)，粉(r)，浅蓝(s)。字母s表示static，a表示absolute，r表示relative，代码附在本文的最后

分析absolute场景:

div2和div3会从文档流完全删除，分析absolute的特性

特性1-文档流删除，可以先把蓝色div2和绿色块div3去掉，那么从上到下的块级元素就div1 和div4..等，可以看div2和div3像是额外插入的，在正常整体布局后在插入进去。

特性2-确定偏移，再把div2和div3补上去，要补上去如果有涉及偏移，需要找div2和div3的包含块，根据上面的包含块定义，当postion是absolute时候，需要找最近不是static的祖先元素，根据1,2,3点找，正常情况下1,3点是用的比较多，这个例子因为没有祖先，所以根据第3点就是初始包含块了，即html元素。所以根据html元素来决定偏移多少，div2没有偏移，div3就是相对Html元素偏移了top-100px,left-200px的absolute。

额外内容：观察div3，没有和div4对齐，原因是因为div3是祖先元素是html并根据偏移，而div4祖先元素是body，而body是相对htrml还有margin的距离，如果body设置为margin：0的话，那么div3就会和div4对齐。该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素。

分析relative场景:

relative有div5和div6，重点看偏移的relative的div6：

特性1-原本空间保留，div6偏移去掉，按正常流看待div6，如div5那样，占据了height：100，以及width等于屏幕的一个矩形空间，如下图“我是偏移了top-0px的relative”。

特性2-确定偏移，为了确定偏移就得和absolute一样确定包含块，根据上面定义positon是relative时候，对应就是它原来的位置的偏移，如图红色框部分就是原来的位置，相对原来位置偏移了50px.

额外：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Jackie</title> 
<style> 

.div1 {
    height:100px;
    background-color: red;
    text-align:center;
    font-weight: bold;
    font-size:50px;
}

.div2 {
    height:100px;
    background-color: blue;
    position:absolute;
    text-align:center;
    font-weight: bold;
    font-size:50px;
}

.div3 {
    height:100px;
    background-color: green;
    position:absolute;
    top:100px;
    left:200px;
    text-align:center;
    font-weight: bold;

}

.div4 {
    height:100px;
    background-color: blueviolet;
    text-align:center;
    font-weight: bold;
    font-size:50px;
}

.div5 {
    height:100px;
    background-color: yellow;
    position:relative;
    text-align:center;
    font-weight: bold;
    font-size:50px;
}

.div6 {
    height:100px;
    background-color: pink;
    position:relative;
    text-align:center;
    font-weight: bold;
    top:50px;
    font-size:50px;
}
.div7 {
    height:100px;
    background-color:  cyan;
    position:relative;
    text-align:center;
    font-weight: bold;
    font-size:50px;
}
</style>
</head>
<body>

<div class="div1">div1</div>
<div class="div2">absolute</div>
<div class="div3">我是偏移了top-100px,left-200px的absolute</div>
<div class="div4">div4</div>
<div class="div5">relative</div>
<div class="div6">我是偏移了top-50px的relative</div>
<div class="div7">div7</div>

</body>
</html>