CSS布局的核心是position屬性庭砍，對元素盒子應(yīng)用這個屬性噪叙，可以相對于它在常規(guī)文檔流
中的位置重新定位改基。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桑驱。
靜態(tài)定位 ：
我們先看一看下圖，這是四個段落都采用默認靜態(tài)定位的效果跛蛋。
上圖中靜態(tài)定位下的塊級元素會在默認文檔流中上下堆疊熬的。
相對定位 ：
下面我們就把第三段的position屬性設(shè)置為relative。光設(shè)置這個屬性還看不出來有什么
不一樣赊级，因為你只設(shè)置了它的定位方式是“相對定位”押框。到底相對哪里定位呢？相對的是它
原來在文檔流中的位置（或者默認位置）理逊。接下來橡伞，可以使用top、right晋被、bottom和
left屬性來改變它的位置了兑徘。但多數(shù)情況下，只用top和left就可以實現(xiàn)我們想要的效
果羡洛。以下CSS規(guī)則 ：
p#specialpara {position:relative; top:25px; left:30px;}
相對定位下挂脑，可以利用top和left屬性相對于元素在文檔流中的常規(guī)位置重新定位
可以給top和left屬性設(shè)定負值，把元素向上、向左移動崭闲。
現(xiàn)在肋联，第三段與它在文檔流中的默認位置相比，向下移動了25像素刁俭，向右移動了30像素橄仍。
相當于它把自己從原來的包含元素（body）中掙脫出來了，而且有一部分還跑到了屏幕之
外牍戚。要注意侮繁，除了這個元素自己相對于原始位置挪動了一下之外，頁面沒有發(fā)生任何變
化翘魄。換句話說鼎天，這個元素原來占據(jù)的空間沒有動，其他元素也沒動暑竟。
使用相對定位的關(guān)鍵是什么呢斋射？就是要考慮到元素原來的空間。如圖3-24所示但荤，可以給第
四段設(shè)置一個30像素或更大的margin-top值罗岖，讓它向下移動，從而避免被重新定位的第三
段擋住腹躁。
絕對定位 :
絕對定位跟靜態(tài)定位和相對定位比桑包，絕對不一樣。因為絕對定位會把元素徹底從文檔流中
拿出來纺非。好哑了，下面我們就修改例子中的代碼，把relative改成absolute烧颖。
p#specialpara {position:absolute; top:25px; left:30px;}
絕對定位下弱左，元素從文檔流中被“連根拔起”，然后再相對于其他元素（在這里炕淮，是默認的定位上下文body）定位
可以看到元素之前占據(jù)的空間被“回收了”拆火。這說明，絕對定位的元素完全脫離了常規(guī)文檔流涂圆，它現(xiàn)在是相對于頂級元素body在定位们镜。而這自然而然就引出了一個關(guān)于定位的重要概念：定位上下文。
首先我們要知道絕對定位元素默認的定位上下文是body元素润歉。如圖所示模狭，通過top和left設(shè)定的偏移值，決定了元素相對于body元素（標記層次中的祖先容器）踩衩，而不是相對于它在文檔流中的位置偏移多遠——這一點與相對定位的元素不同胞皱。
由于絕對定位元素的定位上下文是body邪意，所以在頁面滾動的時候，為了維護與body元素的相對位置關(guān)系反砌，它也會相應(yīng)地移動雾鬼。
在介紹怎么給絕對定位元素設(shè)定其他定位上下文（body之外的元素）之前，我們先把4種定
位方式介紹完宴树。接下來看一看固定定位策菜。
固定定位 :
從完全移出文檔流的角度說，固定定位與絕對定位類似酒贬。
p#specialpara {position:fixed; top:30px; left:20px;}
但不同之處在于又憨，固定定位元素的定位上下文是視口（瀏覽器窗口或手持設(shè)備的屏幕），因此它不會隨頁面滾動而移動锭吨。下面的兩個圖展示了固定定位的效果蠢莺。
定位上下文 ：
把元素的position屬性設(shè)定為relative、absolute或fixed后零如，繼而可以使用top躏将、right、bottom和left屬性考蕾，相對于另一個元素移動該元素的位置祸憋。這里的“另一個元素”，就是該元素的定位上下文肖卧。
在講絕對定位的時候蚯窥，我們知道絕對定位元素默認的定位上下文是body。這是因為body是標記中所有元素唯一的祖先元素塞帐。而實際上拦赠，絕對定位元素的任何祖先元素都可以成為它的定位上下文，只要你把相應(yīng)祖先元素的position設(shè)定為relative即可葵姥。
比如下面的標記
<body>
<div id="outer">
<div id="inner">This is text…</div>
</div>
</body
請注意荷鼠，對HTML中的文本應(yīng)該使用恰當?shù)恼Z義標簽來標記。我們這里為了說明問題的需要牌里，才把文本直接放在了沒有語義的div中颊咬。
div#outer {width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner {top:10px; left:20px; background:#ccc;}
效果如下：
上面的兩個嵌套在一起的div务甥。我們給外部div的上方加了邊框牡辽，給內(nèi)部div加了背景。由于內(nèi)部div（默認）是靜態(tài)定位的敞临，因此top和left屬性不起作用态辛。
看到代碼里給內(nèi)部div設(shè)定了top和left屬性，你是不是覺得圖3-28有問題——為什么內(nèi)部div沒有相對外部div向下移動10像素挺尿，向右移動20像素呢奏黑？為什么它們倆的原點（左上角點）還一樣呢炊邦？原因在于，內(nèi)外部div默認都是靜態(tài)定位熟史，它們之間不存在誰是誰的定位上
下文這個問題馁害。換句話說，在常規(guī)文檔流中蹂匹，由于外部div沒有內(nèi)容碘菜，內(nèi)部div就會跟它共享相同的起點。只有將元素的position屬性設(shè)定為relative限寞、absolute或fixed忍啸，這個元素的top、right履植、bottom和left屬性才會起作用计雌。下面我們就把內(nèi)部div設(shè)定為絕對定
位，來看一看有什么變化發(fā)生玫霎。
div#outer {width:250px; margin:50px 40px; border-top:3px solid red;}
div#inner {position:absolute; top:10px; left:20px; background:#ccc;}
對了凿滤，絕對定位相對于誰呀？由于沒有相對定位的祖先元素供其參照鼠渺，內(nèi)部div只能以默認
的定位上下文body作為參照鸭巴，相對于它定位。此時拦盹，內(nèi)部div完全無視其父元素（外部
div）的存在鹃祖，top和left屬性會相對于body元素向下、向左偏移其位置普舆，結(jié)果下圖所
示恬口。
如果我現(xiàn)在把外部div的position屬性設(shè)定為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;}
這樣，絕對定位的內(nèi)部div的定位上下文就變成了外部div沼侣，結(jié)果如下圖
外部div改為相對定位之后祖能，其后代中絕對定位的元素就會按照top和left屬性的設(shè)定，相對于外部div定位蛾洛。
此時內(nèi)部div的top和left屬性參照的就是外部div了养铸。如果你再用left和top屬性重新定位外部div，內(nèi)部div也會跟著移動相同的距離轧膘，以保證它與外部div（也就是它的定位上下文）之間的位置關(guān)系钞螟。
