CSS布局的核心是position属性，对元素盒子应用这个属性，可以相对于它在常规文档流
中的位置重新定位。position属性有4个值：static、relative、absolute、fixed，默
认值为static。这些属性都是什么意思？别急，我会通过以下4个段落来逐个说明。
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>
在接下来的例子中，我会让第一段、第二段和第四段保持默认的static定位方式，但修改第三段的position属性。
为了不影响其他段落，我特意为第三段添加了值为specialpara的ID。
静态定位 ：
我们先看一看下图，这是四个段落都采用默认静态定位的效果。
上图中静态定位下的块级元素会在默认文档流中上下堆叠。
相对定位 ：
下面我们就把第三段的position属性设置为relative。光设置这个属性还看不出来有什么
不一样，因为你只设置了它的定位方式是“相对定位”。到底相对哪里定位呢？相对的是它
原来在文档流中的位置（或者默认位置）。接下来，可以使用top、right、bottom和
left属性来改变它的位置了。但多数情况下，只用top和left就可以实现我们想要的效
果。以下CSS规则 ：
p#specialpara {position:relative; top:25px; left:30px;}
相对定位下，可以利用top和left属性相对于元素在文档流中的常规位置重新定位
可以给top和left属性设定负值，把元素向上、向左移动。
现在，第三段与它在文档流中的默认位置相比，向下移动了25像素，向右移动了30像素。
相当于它把自己从原来的包含元素（body）中挣脱出来了，而且有一部分还跑到了屏幕之
外。要注意，除了这个元素自己相对于原始位置挪动了一下之外，页面没有发生任何变
化。换句话说，这个元素原来占据的空间没有动，其他元素也没动。
使用相对定位的关键是什么呢？就是要考虑到元素原来的空间。如图3-24所示，可以给第
四段设置一个30像素或更大的margin-top值，让它向下移动，从而避免被重新定位的第三
段挡住。
绝对定位 :
绝对定位跟静态定位和相对定位比，绝对不一样。因为绝对定位会把元素彻底从文档流中
拿出来。好，下面我们就修改例子中的代码，把relative改成absolute。
p#specialpara {position:absolute; top:25px; left:30px;}
绝对定位下，元素从文档流中被“连根拔起”，然后再相对于其他元素（在这里，是默认的定位上下文body）定位
可以看到元素之前占据的空间被“回收了”。这说明，绝对定位的元素完全脱离了常规文档流，它现在是相对于顶级元素body在定位。而这自然而然就引出了一个关于定位的重要概念：定位上下文。
首先我们要知道绝对定位元素默认的定位上下文是body元素。如图所示，通过top和left设定的偏移值，决定了元素相对于body元素（标记层次中的祖先容器），而不是相对于它在文档流中的位置偏移多远——这一点与相对定位的元素不同。
由于绝对定位元素的定位上下文是body，所以在页面滚动的时候，为了维护与body元素的相对位置关系，它也会相应地移动。
在介绍怎么给绝对定位元素设定其他定位上下文（body之外的元素）之前，我们先把4种定
位方式介绍完。接下来看一看固定定位。
固定定位 :
从完全移出文档流的角度说，固定定位与绝对定位类似。
p#specialpara {position:fixed; top:30px; left:20px;}
但不同之处在于，固定定位元素的定位上下文是视口（浏览器窗口或手持设备的屏幕），因此它不会随页面滚动而移动。下面的两个图展示了固定定位的效果。
定位上下文 ：
把元素的position属性设定为relative、absolute或fixed后，继而可以使用top、right、bottom和left属性，相对于另一个元素移动该元素的位置。这里的“另一个元素”，就是该元素的定位上下文。
在讲绝对定位的时候，我们知道绝对定位元素默认的定位上下文是body。这是因为body是标记中所有元素唯一的祖先元素。而实际上，绝对定位元素的任何祖先元素都可以成为它的定位上下文，只要你把相应祖先元素的position设定为relative即可。
比如下面的标记
<body>
<div id="outer">
<div id="inner">This is text…</div>
</div>
</body
请注意，对HTML中的文本应该使用恰当的语义标签来标记。我们这里为了说明问题的需要，才把文本直接放在了没有语义的div中。
div#outer {width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner {top:10px; left:20px; background:#ccc;}
效果如下：
上面的两个嵌套在一起的div。我们给外部div的上方加了边框，给内部div加了背景。由于内部div（默认）是静态定位的，因此top和left属性不起作用。
看到代码里给内部div设定了top和left属性，你是不是觉得图3-28有问题——为什么内部div没有相对外部div向下移动10像素，向右移动20像素呢？为什么它们俩的原点（左上角点）还一样呢？原因在于，内外部div默认都是静态定位，它们之间不存在谁是谁的定位上
下文这个问题。换句话说，在常规文档流中，由于外部div没有内容，内部div就会跟它共享相同的起点。只有将元素的position属性设定为relative、absolute或fixed，这个元素的top、right、bottom和left属性才会起作用。下面我们就把内部div设定为绝对定
位，来看一看有什么变化发生。
div#outer {width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner {position:absolute; top:10px; left:20px; background:#ccc;}
对了，绝对定位相对于谁呀？由于没有相对定位的祖先元素供其参照，内部div只能以默认
的定位上下文body作为参照，相对于它定位。此时，内部div完全无视其父元素（外部
div）的存在，top和left属性会相对于body元素向下、向左偏移其位置，结果下图所
示。
如果我现在把外部div的position属性设定为relative：
div#outer {position:relative; width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner {position:absolute; top:10px; left:20px; background:#ccc;}
这样，绝对定位的内部div的定位上下文就变成了外部div，结果如下图
外部div改为相对定位之后，其后代中绝对定位的元素就会按照top和left属性的设定，相对于外部div定位。
此时内部div的top和left属性参照的就是外部div了。如果你再用left和top属性重新定位外部div，内部div也会跟着移动相同的距离，以保证它与外部div（也就是它的定位上下文）之间的位置关系。
